CSS Measurement Units

Category: Web Development & Approved by devanshchakravarti83@gmail.com On January-14-2021 10:10:11

CSS Measurement Units



We use various measurement units while using style rules i.e. setting up the height and width of any element and for other HTML elements. CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units.
The various CSS measurement units are as follows:

  1. Percentage (%)
    Defines a measurement as a percentage relative to another value, typically an enclosing element.
    Example:

    .container {
    border-radius: 50%;
    }


  2. cm
    Defines a measurement in centimeters.
    Example:

    .container {
    border-radius: 10cm;
    }


  3. em
    A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to pt, each “em” unit would be 12pt; thus 2em would be 24pt.
    Example:

    .container {
    font-size: 15em;
    }


  4. ex
    This value defines a measurement relative to a font’s x-height. The x-height is determined by the height of the font’s lowercase letter x.
    Example:

    .container {
    line-height: 4ex;
    }


  5. in
    Defines a measurement in inches.
    Example:

    .container {
    Word-spacing: 0.1in;
    }


  6. mm
    Defines a measurement in millimeters.
    Example:

    p {
    word-spacing: 20mm;
    }


  7. pc
    Defines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch.
    Example:

    .container {
    font-size: 18pc;
    }


  8. pt
    Defines a measurement in points. A point is defined as 1/72nd of an inch.
    Example:

    .container {
    font-size: 20pt;
    }


  9. px
    Defines a measurement in screen pixels.
    Example:

    .container {
    margin: 10px;
    }




We have made blog on CSS from basic, if you haven’t read them so Click Here

Note: content are taken from various documentation files



Comments

Share your thoughts about this post
web counter