CSS Units

CSS has several different units for expressing a length. They can be divided into two categories: absolute and relative.

Absolute Lengths

Absolute length units are fixed and will appear as exactly that size. The most common absolute unit is pixels (px).

Example

css

p {
  font-size: 16px;
  width: 500px;
}

Relative Lengths

Relative length units specify a length relative to another length property. Relative units scale better between different rendering devices and are preferred for responsive design.

em: Relative to the font-size of the element (2em means 2 times the size of the current font).
rem: Relative to the font-size of the root element (<html>). This provides a consistent base for scaling across the entire page.
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 rem and vw

css

html {
  font-size: 16px; /* Base font size */
}

h1 {
  font-size: 2.5rem; /* 2.5 * 16px = 40px */
}

.full-width-section {
  width: 100vw;
}

Try it Yourself »

Test Yourself with an Exercise

Which unit is relative to the font-size of the root element?

rem

« CSS Counters CSS Specificity »