The quick guide to CSS length units

Essentially, CSS length units have an important role in measuring and building websites. A lot of CSS properties, such as margins and paddings (to name a few), depend on length measurements to properly display various page elements. It’s no surprise, then, that there are several different units for expressing length in CSS, each serving its own specific purpose.

All CSS length units can be expressed as either positive or negative numbers, although some properties will accept only positive numbers (ex. font-size). The number is followed by a two-letter abbreviation that represents the actual unit of length such as cm (centimeters) or px (pixels). The exception to the rule is a length of 0 (zero), which doesn’t need to have the length unit specified.

CSS length units come in two types: absolute length units and relative length units.

Absolute CSS length units

Absolute CSS length units are not well suited for web design. They are a digital representation of measurements in the physical world and are not related to the screen size and resolution. Absolute lengths of the same values of a particular unit can differ on different screens. This is caused by the difference in the screen DPI (dots per inch). Higher resolution screens have a higher DPI compared to smaller resolution screens, thus making the image or text look smaller. Absolute units are much more useful in defining style sheets for printed documents, where measuring things in terms of inches, points, and picas is common.

Absolute length units include:

cm (centimeters)
mm (millimeters)
in (inches)
pc (picas)
pt (points)
px (pixels)

Most of the absolute length units are useless on the web. The only exception being the px (feel free to chime in with use cases for the other ones in the comments).
Pixel is relative to the viewing device. For screen display, one CSS pixel typically equals one device pixel (dot) of the display. For printers and very high resolution screens one CSS pixel implies multiple device pixels, so that the number of pixel per inch stays around 96. Pixel is the smallest unit of measurement and usually the unit used as a benchmark for the other units.

Relative CSS length units

Relative CSS length units don’t have fixed values. Their values are relative to some other predefined value or feature. Relative units are more useful in web design because they make it easy to properly size elements since we can relate their width, height, font-size, etc. to some other base parameter.

FONT-RELATIVE LENGTHS
Font relative units relate to the predefined font-size or/and font-family value, and include:

ex (x-height)
ch (character)
em (em)
rem (root em)

ex
The ex unit is defined as the “x-height of the current font OR one-half of one em”. The x-height of a given font is the height of the lower-case x of that font. It changes as the font-family changes.

ch
This is similar to x-height, only ch is based on the width of the zero (0) character instead of the height of the x character. It also changes as the font-family changes.

em
The em unit has a value equal to the font size of the base element or the parent element. For example, if the font size of the parent element is 30px then the value of 1em will compute to 30px (30 x 1) for all immediate child elements. The number doesn’t need to be a whole number. If we substitute 1em, from our example, with 0.5em, the value will compute to 15px (30 x 0.5).

One thing to note is that the em value takes the value of the immediate parent tag. This can lead to undesired results in the case of nested elements.

For example, we have have 3 elements nested inside each other. The first element (root) has a font-size value of 30px, and the two nested elements have the font value set to 2em. The element nested within the root element will have font size computed to 60px (30 x 2) while the element nested within it will have the font size computed to 120px (60 x 2).

rem
rem unit is similar to em, but its value always stays equal to the font size of the root element (which is the html element in HTML documents). It doesn’t use the cascade like em does.
The rem unit comes in handy when developing responsive websites because you are able to scale the whole page just by changing the font size on the html element.

VIEWPORT-PERCENTAGE LENGTHS
Viewport-percentage lengths are based on the width and height of the viewport, and include:

vh (viewport height)
vw (viewport width)
vmin (viewport minimum)
vmax (viewport maximum)

vw
This is the “viewport width” unit. 1vw is equal to 1/100th of the width of the viewport. It is similar to percentage, except that the value remains consistent for all elements regardless of their parent elements or parent elements width. For example, if the width of the window is 1000px, 1vw will be 10px.

vh
Same as the vw (viewport width) unit only it is based on the viewport height instead. 1vh is equal to 1/100th of the viewport height. For example, if the browser’s height is 900px, 1vh would evaluate to 9px.

vmin
vmin equals to 1/100th of the minimum value between the height and the width of the viewport. In other words, 1/100th of the side with the smallest length. For example, if the dimensions were 1200 x 800, the value would be 8px.

vmax
Similar to vmin, except it equals to 1/100th of the maximum value between the height and the width of the viewport. In other words, 1/100th of the side with the largest length. For example, if the dimensions were 1200 x 800, the value would be 12px.

Percentages

Percentage isn’t technically a length unit, but it’s kind of related since it’s used very often in responsive website development.

A length set in percentage is based on the length of same property of the parent element. For example, if the parent element is 1000px wide, the nested element with the width value of 50% will be 500px wide.

Browser support

em, ex, px, cm, mm, in, pt, and pc
Supported in all browsers, including old IE.

rem
All in-use browsers including IE9+.

vw, vh, and vmin
Chrome 20+, IE 9+, Firefox 19+, Safari 6+, Opera 20+. Internet Explorer vmin is supported by the non-standard vm syntax.

vmax
Chrome 20+, Firefox 19+, and Opera 20+, and Safari 6.1+. No support in IE.