<length>
A CSS data type representing a distance value. It consists of a number followed by a unit (like 'px', 'em', 'rem', 'vw', etc.). Lengths fall into two big buckets: absolute units that map to physical sizes, and relative units that resolve based on context (the font, the viewport, the container, the line height).
Quick example
h1 {
/* A few common lengths */
font-size: 2.5rem;
margin-top: 1lh;
width: 50cqi;
min-height: 100dvh;
}All units
Font-relative units
Resolve based on the font of the current element or the root element.
| Unit | Measures | Notes | Baseline |
|---|---|---|---|
em | Current element's font size | Compounds when nested. The most common pitfall: an em on a child resolves against the child's own font-size if it's been set. | Widely |
rem | Root element's font size | Doesn't compound. Default for typography and spacing in modern stylesheets. | Widely |
ex | x-height of the current font | Top of a lowercase 'x' to baseline. Rarely used outside font-fitting hacks. | Widely |
rex | x-height of the root font | Root-level version of ex. | Newly (2024) |
cap | Cap height of the current font | Baseline to top of an uppercase letter. Useful for aligning icons to the visual top of text. | Newly (2024) |
rcap | Cap height of the root font | Root-level version of cap. | Newly (2024) |
ch | Width of the '0' (zero) character | Best for setting reading-width limits on prose: max-width: 65ch. | Widely |
rch | Width of '0' in the root font | Root-level version of ch. | Newly (2024) |
ic | Advance width of the CJK ideograph 水 | Sizing CJK columns of vertical Japanese or Chinese text. | Newly (2024) |
ric | Advance width of CJK 水 in the root font | Root-level version of ic. | Newly (2024) |
lh | Computed line height of the current element | Vertical rhythm tied to type. Resolves to a real pixel value usable for any length. | Newly (2024) |
rlh | Computed line height of the root element | Root-level version of lh. | Newly (2024) |
Viewport-relative units
Each axis has four variants: the original (vw, vh), and small (svw, svh), large (lvw, lvh), and dynamic (dvw, dvh) versions that account for mobile browser chrome.
| Unit | Measures | Notes | Baseline |
|---|---|---|---|
vw | 1% of viewport width | On mobile, returns the largest viewport width regardless of address bar state. | Widely |
vh | 1% of viewport height | Same caveat: ignores the mobile address bar. Use dvh for mobile-safe full-screen layouts. | Widely |
vi | 1% of viewport inline axis | Writing-mode aware version of vw. | Widely |
vb | 1% of viewport block axis | Writing-mode aware version of vh. | Widely |
vmin | 1% of the smaller of vw or vh | Useful for sizing that should never exceed the smaller viewport edge. | Widely |
vmax | 1% of the larger of vw or vh | Inverse of vmin. | Widely |
svw / svh / svi / svb | Small viewport (browser chrome visible) | Returns the viewport size with mobile bars showing. Stable, won't jump on scroll. | Newly (2023) |
lvw / lvh / lvi / lvb | Large viewport (browser chrome hidden) | Returns the viewport size with mobile bars hidden. | Newly (2023) |
dvw / dvh / dvi / dvb | Dynamic viewport, follows chrome state in real time | What you usually want for full-screen mobile elements. The element grows and shrinks with the address bar. | Newly (2023) |
svmin / lvmin / dvmin | vmin variants for small / large / dynamic viewport | Same idea as vmin, with mobile-aware viewports. | Newly (2023) |
svmax / lvmax / dvmax | vmax variants for small / large / dynamic viewport | Same idea as vmax, with mobile-aware viewports. | Newly (2023) |
Container-relative units
Resolve against the nearest ancestor with container-type set. Without one, they fall back to viewport-relative behavior.
| Unit | Measures | Notes | Baseline |
|---|---|---|---|
cqw | 1% of query container's width | Requires container-type: inline-size or size on a parent. | Newly (2023) |
cqh | 1% of query container's height | Requires container-type: size on a parent. | Newly (2023) |
cqi | 1% of query container's inline size | Writing-mode aware. Most useful unit of the group for typography that scales with a component. | Newly (2023) |
cqb | 1% of query container's block size | Writing-mode aware version of cqh. | Newly (2023) |
cqmin | 1% of the smaller of cqi or cqb | Container-relative version of vmin. | Newly (2023) |
cqmax | 1% of the larger of cqi or cqb | Container-relative version of vmax. | Newly (2023) |
Absolute units
Map to physical sizes. On screens, all of these are anchored to px.
| Unit | Measures | Notes | Baseline |
|---|---|---|---|
px | 1 CSS pixel (1/96 of an inch) | Despite the name, not always one device pixel. The fundamental absolute unit on the web. | Widely |
cm | 1 centimeter (= 96/2.54 px) | Mostly useful for print stylesheets. | Widely |
mm | 1 millimeter (= 1/10 cm) | Print stylesheets. | Widely |
Q | Quarter-millimeter (= 1/40 cm) | Print typography. Rare on the web. | Widely |
in | 1 inch (= 96 px) | Print stylesheets. | Widely |
pt | 1 point (= 1/72 of an inch) | Standard typographic unit in print. | Widely |
pc | 1 pica (= 12 pt) | Print typography. Rarely seen on the web. | Widely |
<length> Browser Support
Widely availableSince 201596% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
Safe to use without fallbacks.
1+
1+
1+
12+