CSS Units Guide

Learn the 6 essential CSS units: px, %, em, rem, vh, vw

px

Pixels

Absolute unit. Fixed size, does not scale.

width: 200px;

%

Percentage

Relative to parent element size.

width: 50%;

em

Em

Relative to the element’s font-size.

font-size: 1.5em;

1em 1.5em 2em

rem

Root Em

Relative to root font-size (16px).

font-size: 2rem;

1rem 1.5rem 2rem

vh

Viewport Height

1vh = 1% of viewport height.

height: 100vh;

vw

Viewport Width

1vw = 1% of viewport width.

width: 80vw;