CSS Units

A comprehensive guide to CSS units like px, em, rem, %, vh, and vw.

CSS Units Reference

CSS has several different units for expressing lengths.

Absolute Lengths

Absolute length units are fixed and will appear as exactly that size.

px: pixels (1px = 1/96th of 1in)
cm: centimeters
mm: millimeters
in: inches (1in = 96px = 2.54cm)

Relative Lengths

Relative length units specify a length relative to another length property.

em: Relative to the font-size of the element (2em means 2 times the size of the current font)
rem: Relative to font-size of the root element
vw: Relative to 1% of the width of the viewport
vh: Relative to 1% of the height of the viewport
%: Relative to the parent element

Example

/* Using different units */
div {
  width: 50%;      /* Relative to parent */
  padding: 2em;    /* Relative to font-size */
  font-size: 16px; /* Absolute */
}