Modern CSS units you should know

Why bother with new units?

Most stylesheets still run on three units: px for fixed sizes, rem for typography, and % for layout. They cover a lot of ground, but they all measure against the same things: the page, the root font size, the parent. None of them know about a parent component, the actual line height of the text, or the shrinking address bar on mobile Safari.

The units in this article do. They've all shipped to every major browser in the last few years, and each solves a problem the old units couldn't reach.

dvh, svh, lvh: viewport units that work on mobile

The original vh unit has one stubborn flaw: on mobile it returns the largest possible viewport, ignoring the address bar. So height: 100vh on a hero section gets clipped at the bottom while the bar is visible, then jumps when the bar hides on scroll.

svh measures the small viewport (bars showing). lvh measures the large viewport (bars hidden). dvh is dynamic: it follows the bar state in real time.

.hero {
  min-height: 100dvh;
}

For a full-bleed mobile menu or a modal overlay, 100dvh is the safe default. The same trio exists for width (dvw, svw, lvw) and for the inline and block axes (dvi, dvb, etc).

Baseline newly available since 2023.

Container query units: cqw, cqi, cqb

Viewport units size relative to the page. Container query units size relative to the nearest containment context. So a card's typography can scale with the card, not the screen.

cqw and cqh measure the container's width and height. cqi and cqb measure the inline and block axes (writing-mode aware). cqmin and cqmax pick the smaller or larger of the two.

.card {
  container-type: inline-size;
}

.card h2 {
  font-size: clamp(1rem, 5cqi, 2rem);
}

Now the heading scales with the card itself. Drop the same card into a 300px sidebar or a 900px main column and the type scales correctly in both, with no media queries.

The catch: container query units only work inside an element with container-type set. Without it, they fall back to viewport-relative behavior, which is rarely what you want.

Baseline newly available since 2023.

lh and rlh: spacing tied to line height

lh resolves to the current element's computed line height. rlh resolves to the root element's. Both produce a real pixel value, so they work anywhere a length is valid.

Why bother? Vertical rhythm. If you want a heading's top margin to equal exactly two lines of body text, that's 2lh. Resize the type and the margin scales with it.

h2 {
  margin-block-start: 2lh;
}

.divider {
  height: 1lh;
}

Other places it shines: dividers between paragraphs, the height of a single-line <details> summary, the indent on a hanging quote.

Baseline newly available since 2024.

cap, ic, ex: units that key off the typeface

Sometimes you want UI to align with the actual letterforms, not the line box.

cap equals the cap height of the current font: the distance from the baseline to the top of an uppercase letter. Useful when you want an icon to sit flush with the visual top of a heading rather than hovering above it.

.icon {
  height: 1cap;
}

ic equals the advance width of the CJK ideograph 水. Niche outside CJK layouts, but it's the right answer when sizing columns of vertical Japanese or Chinese text.

ex equals the x-height: the top of a lowercase 'x' to the baseline. It's been around forever but rarely shows up outside font-fitting hacks.

These three won't change your day-to-day, but when you need them nothing else does the job.

Quick reference

The short version, in one place. For the complete catalog of every CSS length unit, see the length reference.

What to use first

If you're touching a stylesheet today, two changes pay for themselves immediately. Replace 100vh with 100dvh on every full-screen mobile element. And on any component that renders at variable widths, swap viewport-relative font sizing for container query units. Both are one-line changes that fix real bugs.

The rest are tools to reach for when you hit the specific problem they solve. Worth knowing they exist before you build a workaround for something CSS already handles.