CSS Units

In CSS properties, you can use units to specify non-zero length values.

Understanding CSS Units

The units in which you can measure length can either be absolute such as points, pixels, etc., or relative, like em units and percentages (%).

It is obligatory to specify CSS units for non-zero values as there is no default unit. Therefore, missing or ignoring a unit would be treated as an error. However, in case the value is 0, then, in that case, the unit can be omitted (zero pixels are the same measurement as zero inches).

Note:  The length refers to distance measurements. It is a measurement comprising a numeric value and a unit only, like 2em, 10px, 50%, etc. The whitespace can not appear between the number and the unit.

Relative Length Units

You can use relative length units to specify a length relative to another length property. Relative units are:

The em and ex units are dependent on the font size applied on the element.

Using the Em Unit

1em's measurement is equivalent to the computed value of the element's font-size property on which it is used. You may use it for vertical or horizontal measurement.

For example, suppose element's font-size is set to 16px and its line-height is set to 2.5em then the line-height's calculated value in pixel is 2.5 x 16px = 40px.

.content {
    font-size: 16px;
    line-height: 2.5em;
}

Try With Example

The only exception is when you specify em in the font-size property's value. In that case, it refers to the parent element's font size.

So, on specifying a font size in em, 1em equals the inherited font size. As such, font-size: of 1.2em; makes the text 1.2 times larger than the parent element's text.

Example :

body {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}
p {
    font-size: 1.6em;
}
p:first-letter {
    font-size: 3em;
    font-weight: bold;
}

Try With Example

Let's understand this code. In modern browsers, the font's default size is 16px. So firstly, we need to reduce this size for the whole document by setting the body font size to 62.5%, which will reset the font size to 10px (62.5% of 16px).

It is to round off the default font size for easily converting px to em.

Using the Ex Unit

The ex unit is equivalent to the current font's x-height.

As illustrated below, the x-height is called so because it is often equal to the lowercase 'x-height. However, the value of ex is defined even for fonts that do not contain an 'x.'

Absolute Length Units

These are fixed in relation to each other. Absolute Length Units are highly dependent on the output medium, so they are mainly useful when the output environment is known. It consists of the physical units (in, mm, cm, pc, pt) and the px unit.

You should use absolute physical units such as in, cm, mm, etc., for print media and similar high-resolution devices. However, it is recommended to use the pixel or em units for on-screen displays such as desktop and lower-resolution devices.

1.  h1 { margin: 0.5in; }       /* inches  */
2.  h2 { line-height: 3cm; }    /* centimeters */
3.  h3 { word-spacing: 4mm; }   /* millimeters */
4.  h4 { font-size: 12pt; }     /* points */
5.  h5 { font-size: 1pc; }      /* picas */
6.  h6 { font-size: 12px; }     /* picas */

Tip:  Style sheets using relative units such as em or percentage (%) can more easily scale from one output environment to another.