Photograph of a wooden ruler

While CSS has many ways to measure linear distance, all of them can be broadly classified into two groups:

  • absolute values that relate to a real-world system, such as picas or pixels.
  • relative units that relate to the element itself, or its context.

As a general rule, relative units are preferred for responsive design; absolute units are for small fixed-width elements such as hairlines.

Absolute CSS UnitAbbreviationRelative CSS UnitAbbreviation
CentimeterscmRoot emrem
PicaspcViewport widthvw
Quarter-millimeterqViewport heightvh
Viewport minimumvmin
Viewport maximumvmax

For more information, I've linked lesser-known units to associated in-depth articles that explain them thoroughly.

1em is the width of the m character in the default font set for that browser. (ex is the height of the x character in a font).

ch is the equivalent of em, but applied to the width of the 0 (zero) numeral of the chosen font.

gd relates to the CSS grid; unfortunately, only IE10+ currently supports the grid module.

You never need to specify units when declaring a length value of 0: zero centimeters is the same as 0 pixels. In all other cases, units of measurement should be declared: 2em, 2px, etc.

All systems of CSS measurement can take floating point values: 2.25rem, 5.3cm, etc.

Enjoy this piece? I invite you to follow me at to learn more.