CSS Foundations
CSS Units
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.