CSS Foundations

CSS Units

Written by Swapnil RajaPublished 30 Jul 2026

Choose lengths, percentages, angles, times, and resolution units according to what the value should respond to. It covers fixed, font-relative, viewport, container, percentage, time, angle, and resolution values with guidance on choosing the right relationship.

A CSS unit states what a measurement is relative to. Choosing between px, rem, em, percentages, viewport units, and container units is therefore a layout decision, not a formatting preference.

The most useful question is not “Which unit is best?” but “What should cause this value to change?” Root-relative units follow user text settings, em follows the current component, percentages follow a property-specific reference, and viewport or container units follow available space. Once that relationship is clear, the unit choice is usually straightforward. This topic also connects with CSS Font Size and CSS Math Functions.

A unit expresses a relationship

Use px when a value should remain tied to a CSS pixel. Use rem for type and spacing that should follow the root font size. Use em when a value should scale with the current element.

Example

css

:root { font-size: 100%; }

.card {
  padding: 1.25rem;
  border-radius: 0.75rem;
}

.card__icon {
  width: 1.5em;
  height: 1.5em;
}

Viewport and container units

vw and vh use the viewport. On mobile, prefer svh, lvh, or dvh when browser chrome affects height. Container units such as cqw become useful inside a query container.

Percentages need a reference

A percentage is resolved against a value defined by the property. Width percentages usually refer to the containing block’s inline size; percentage transforms refer to the transformed element itself. Check the property definition instead of assuming.

Angles: deg, rad, turn
Time: s, ms
Resolution: dpi, dppx
Grid fraction: fr
Unitless values: line-height, opacity, flex growth factors

Unit Reference

Unit	Relative to	Typical use
rem	Root element's font size	Type and spacing
em	Element's font size	Component-relative spacing
dvh	Dynamic viewport height	Full-height interfaces
cqw	One percent of a query container's width	Container-responsive sizing

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Units example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

:root { font-size: 100%; }

.card {
  padding: 1.25rem;
  border-radius: 0.75rem;
}

.card__icon {
  width: 1.5em;
  height: 1.5em;
}
  </style>
</head>
<body>
  <main><article class="card"><span class="card__icon">★</span><h1>Relative units</h1><p>Resize the preview and change its root font size.</p></article></main>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
rem unit	4	12	3.6	5
dvh, svh, and lvh units	108	108	101	15.4

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Choose a unit according to what the measurement should respond to: font size, container, viewport, or a fixed CSS pixel.

Avoid converting every design measurement to one favorite unit. Borders may sensibly use CSS pixels, typography may use rem, icon details may use em, and layout tracks may use percentages or fr. A coherent interface can-and usually should-use several unit families for different purposes.

PreviousCSS Specificity NextBox Sizing