CSS References
CSS Units Reference
CSS units define the magnitude of lengths — widths, margins, font sizes and more. They fall into two families: absolute units, which are fixed physical sizes, and relative units, which scale with something else such as the font size, the parent, or the viewport. Choosing the right unit is key to responsive, accessible design. This reference lists them all.
Units at a glance
| Unit | Description | Type |
|---|---|---|
| px | Pixels — a fixed device-independent dot. | Absolute |
| pt | Points — 1/72 inch, mainly for print. | Absolute |
| pc | Picas — 12 points. | Absolute |
| in | Inches — 96px. | Absolute |
| cm | Centimetres. | Absolute |
| mm | Millimetres. | Absolute |
| em | Relative to the font-size of the element. | Relative |
| rem | Relative to the root (<html>) font-size. | Relative |
| % | Relative to the parent's corresponding value. | Relative |
| ch | Width of the '0' character of the current font. | Relative |
| ex | The x-height of the current font. | Relative |
| vw | 1% of the viewport width. | Relative |
| vh | 1% of the viewport height. | Relative |
| vmin | 1% of the smaller viewport dimension. | Relative |
| vmax | 1% of the larger viewport dimension. | Relative |
| vi | 1% of the viewport size in the inline direction. | Relative |
| vb | 1% of the viewport size in the block direction. | Relative |
| svh / lvh / dvh | Small, large and dynamic viewport height (mobile-aware). | Relative |
| fr | A fraction of free space in a CSS Grid. | Relative (grid) |
| lh | The line-height of the element. | Relative |
| rlh | The line-height of the root element. | Relative |
| cqw / cqh | 1% of a query container's width / height. | Relative (container) |
| deg | Degrees, for angles (transforms, gradients). | Angle |
| s / ms | Seconds / milliseconds, for time. | Time |
Absolute vs relative — when to use which
- Use rem for font sizes and spacing so everything scales with the user's browser font-size setting — the accessible choice.
- Use em when you want a value to scale with the element's own font size, e.g. padding inside a button.
- Use % and fr for flexible layout widths and grid tracks.
- Use vw/vh (or dvh) for full-viewport heroes and fluid typography with clamp().
- Use ch to size text columns to a comfortable line length (around 60–75ch).
- Reserve px for hairline borders and places where a fixed size is genuinely intended.
em vs rem — the key difference
em compounds: a nested element with font-size: 1.2em multiplies its parent's size, so deep nesting can snowball. rem always refers to the root font-size, so it stays predictable no matter how deeply nested the element is.
:root { font-size: 16px; }
h1 { font-size: 2rem; } /* always 32px */
.box{ font-size: 1.25em; } /* 1.25 x its parent's font-size */
.wrap { width: min(90vw, 60ch); }💡
On mobile, prefer dvh over vh for full-height sections — dvh accounts for the browser's collapsing address bar, avoiding content that gets cut off.