CSS Units: px, em, rem, %, vw, vh and When to Use Each

Absolute units: everything is px underneath

The CSS Values and Units specification ties all absolute units to one anchor: 1in = 2.54cm = 96px. A CSS pixel is therefore 1/96 of an inch by definition, and the other units follow:

On a screen, these are not physical measurements. MDN explains that on high-resolution screens one CSS pixel spans several device pixels, so a 1cm box is not exactly 1 centimeter on your phone. The physical units are useful in print stylesheets, where a 12pt font is 16px and a 2cm margin is 75.591px. On screens, use px for things that should not scale with text: borders, hairlines, shadows. The guide on points vs pixels covers how design tools map them.

em and rem: relative to text

The specification defines em as the computed font size of the element it is used on, and rem as the em of the root element. One exception matters: used on font-size itself, em refers to the parent's font size. That makes em compound. MDN's example sets nested spans to 1.6em on a 16px base: the outer span renders at 25.6px and the inner one at 40.96px. Switch to 1.6rem and both are 25.6px.

rem follows the root size, and MDN says a common browser default is 16px, which users can change. Here is what common rem values come to at the default and for a reader who set 20px:

That second column is the point. MDN warns that font sizes in px are not accessible, because in some browsers users cannot enlarge them, and recommends values relative to the user's default. Size text in rem and the whole page respects the reader's choice. The px to rem converter turns a design's pixel values into rem for any root size.

em still has a place: padding on a button in em grows with the button's own text, so a small and a large button keep the same proportions. Use rem for font sizes and page-level spacing, em for spacing that belongs to one component's text.

ch, ex and lh

Three more font-relative units are worth knowing. ch is measured from the width of the "0" glyph in the current font, which makes max-width: 65ch a quick way to cap a paragraph at roughly that many characters per line. ex is the font's x-height; the specification says to assume 0.5em where it cannot be determined. lh equals the element's computed line height, handy for spacing that lines up with the text rhythm, such as a margin of exactly one line. All three change with the font, so they are best for typography rather than layout.

Percentages: relative to the parent box

MDN notes that percentages are not lengths, and what they refer to depends on the property. CSS 2.2 sets the rules most layouts rely on:

• width: a percentage of the containing block's width.
• height: a percentage of the containing block's height, but treated as auto when that height depends on content. That is why height: 50% often does nothing.
• margin and padding: a percentage of the containing block's width, even for top and bottom. A padding-top: 50% box is half as tall as its parent is wide.

Percent widths suit columns and fluid images. For heights, give the parent an explicit height or use a different unit.

vw, vh and the phone address bar

Viewport units are a percentage of the browser window: 1vw is 1 percent of its width, 1vh 1 percent of its height, vmin the smaller of the two and vmax the larger. On a 1280 by 800 window:

Phones complicate vh, because the address bar slides away as you scroll, so the window height changes. The specification added three sets of units for this, and MDN describes them:

• svh, svw (small): measured with the browser interface expanded. Content always fits, and may leave a gap when the bar hides.
• lvh, lvw (large): measured with the interface retracted. Content may hide behind the bar when it shows.
• dvh, dvw (dynamic): follow the bar as it moves. MDN warns this can resize content while the user scrolls and cost performance.

MDN states that the default units, vh and vw, are currently equal to their large counterparts. So height: 100vh is 100lvh, which is why a full-screen hero slips under the address bar. Use 100svh when the content must stay visible, 100dvh for a full-screen app view, and keep vh for decoration.

Fluid sizes with clamp()

The specification defines clamp(MIN, VAL, MAX) as the same value as max(MIN, min(VAL, MAX)): the middle value, kept between a floor and a ceiling. Mixing rem and vw in the middle value gives text that grows with the window but stays readable. For clamp(1rem, 0.75rem + 1.25vw, 1.5rem) at a 16px root:

Keep a rem part in the middle value. A size made only of vw ignores the reader's font setting completely. If the minimum is larger than the maximum, the specification says the minimum wins. The CSS clamp generator works out the middle value from a minimum and maximum size and the two window widths where they should apply.

Which unit for what

• Font sizes: rem, or clamp() with a rem floor and ceiling.
• Spacing around text: rem for page rhythm, em inside a component.
• Borders, outlines, shadows: px.
• Column widths: %, with a max-width in rem or ch to keep lines readable.
• Full-height sections on phones: svh or dvh, not vh.
• Print stylesheets: pt, cm, mm, in.

For tap areas, see the guide on touch target sizes, and for scaling and contrast rules the WCAG basics.

Frequently asked questions

Sources

• W3C, CSS Values and Units Module Level 4, Working Draft of 12 March 2024 (absolute units: 1in = 2.54cm = 96px, 1pt = 1/72in, 1pc = 1/6in, 1Q = 1/40cm; em, rem, ex, ch, lh; font-relative units on font-size resolve against the parent; small, large and dynamic viewport units; clamp(MIN, VAL, MAX) equals max(MIN, min(VAL, MAX)) and MIN wins a conflict)
• MDN Web Docs: length (px = 1in / 96 and several device pixels on high-resolution screens; rem and the common 16px default; em on font-size is the inherited size; sv*, lv* and dv* units; default vh currently equals lvh; dynamic units can resize content while scrolling; percentages are not lengths)
• MDN Web Docs: font-size (em values compound: 25.6px and 40.96px in the nested span example; rem avoids compounding; px font sizes are not accessible; prefer values relative to the user's default)
• W3C, CSS 2.2, Box model, sections 8.3 and 8.4 (percentage margins and paddings, including top and bottom, refer to the width of the containing block)
• W3C, CSS 2.2, Visual formatting model details, sections 10.2 and 10.5 (percentage width refers to the containing block width; percentage height to its height, and acts as auto if that height depends on content)

Written by Tobias. Updated October 30, 2026.