CSS Units Explained: px, em, rem, %, vw, vh and fr
A complete reference for CSS measurement units, with live demos, a comparison table and when to use each.
Voices come from this device. Listening happens in your browser; nothing is sent anywhere.
In short
CSS units fall into four families: absolute (px, pt, cm, in), relative to font or parent (%, em, rem, ch), relative to the viewport (vw, vh, vmin, vmax) and flexible grid sizing (fr, min-content, max-content). Use rem for type, %, fr and viewport units for layout, and px for borders and shadows.
CSS gives you more than a dozen ways to say how big something is. They fall into four families, and knowing which family a unit belongs to tells you what it scales with.
The four families of CSS units
Absolute units
px, pt, cm, inFixed sizes that don't scale with font size or viewport. On screens they are all anchored to the CSS pixel (1in = 96px).
Relative units
%, em, remRelative to another length: the parent, the font size or the root font size. Essential for responsive design.
Viewport units
vw, vh, vmin, vmaxRelative to the size of the browser viewport. Perfect for full-screen layouts.
Flexible sizing
fr, min-content, max-contentUsed in CSS Grid and Flexbox to build flexible, responsive layouts.
Live unit demonstrations
Resize the window: the fixed box never changes, the others react to their parent, the viewport or the root font size.
Unit comparison table
| Unit | Type | Relative to | Use case | Example |
|---|---|---|---|---|
| px | Absolute | CSS reference pixel | Fixed sizes, borders | border: 1px solid #000; |
| % | Relative | Parent element | Layout widths, heights | width: 80%; |
| em | Relative | Parent font-size | Typography scaling | font-size: 1.2em; |
| rem | Relative | Root element font-size | Consistent typography | padding: 1.5rem; |
| vw | Viewport | Viewport width | Full-width elements | width: 100vw; |
| vh | Viewport | Viewport height | Full-height sections | height: 100vh; |
| vmin | Viewport | Smaller viewport dimension | Mobile-friendly text | font-size: 4vmin; |
| vmax | Viewport | Larger viewport dimension | Large-screen spacing | padding: 2vmax; |
| fr | Flexible | Free space in the grid | CSS Grid layouts | grid-template-columns: 1fr 2fr; |
Detailed unit explanations
Viewport units (vh, vw, vmin, vmax)
vh (viewport height): 1vh = 1% of the viewport height
vw (viewport width): 1vw = 1% of the viewport width
vmin: 1% of the viewport's smaller dimension
vmax: 1% of the viewport's larger dimension
Example: an element with height: 50vh is half the height of the viewport, regardless of scrolling. On mobile, where toolbars grow and shrink, use dvh (dynamic), svh (smallest) or lvh (largest) for predictable results.
Pixel (px) vs relative units
px is a reference pixel, not a device pixel: on a high-density screen one CSS pixel covers several physical pixels.
Relative units adapt to the reader's font-size preference and to the layout around them.
em vs rem
em is relative to the font-size of the element's parent (and compounds when nested).
rem is always relative to the root (html) element's font-size.
Example: if the html font-size is 16px, then 1rem = 16px everywhere, but 1em can differ in each context.
When to use which unit
- Layouts: %, fr, vw/vh
- Typography: rem, em
- Borders and shadows: px
- Full-screen elements: vh/dvh, vw
- Grid systems: fr, %
- Print styles: cm, in, pt
Pro tip: combine units. width: min(1000px, 90vw) creates a responsive container that is never wider than 1000px or 90% of the viewport.
Was this useful?
Anonymous. A clap or a critique is the only feedback this blog records; pick again to take it back.
Frequently asked questions
What is the difference between em and rem?
em is relative to the font-size of the element's parent (or the element itself for font-size), so it compounds when nested. rem is always relative to the root html font-size, so 1rem is the same everywhere on the page.
Which CSS unit is best for font sizes?
rem, because it respects the reader's browser font-size setting and doesn't compound like em. Use em for spacing that should scale with the surrounding text.
Is 100vh the visible screen height on mobile?
Not always: mobile browser toolbars change the visible height. Use 100dvh for the current visible height, or svh/lvh for the smallest or largest viewport, where supported.
What does the fr unit do in CSS Grid?
fr is a fraction of the free space in a grid container. grid-template-columns: 1fr 2fr gives the second column twice the remaining space of the first.