There are 47 CSS units across 5 data types. Each section below covers one type: what it represents, the units that belong to it, and a link to the full reference page for that type.
<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).
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 |
<angle>
A basic CSS type for rotation values. It can be expressed in degrees (deg), radians (rad), gradians (grad), or turns (turn).
Angle units
Used for rotations, gradient directions, and conic-gradient stops.
| Unit | Measures | Notes | Baseline |
|---|---|---|---|
deg | Degrees | Most common. A full circle is 360deg. | Widely |
grad | Gradians | A full circle is 400grad. Rare on the web. | Widely |
rad | Radians | A full circle is 2π rad (≈6.2832rad). Useful when porting math from code. | Widely |
turn | Turns | A full circle is 1turn. Best when expressing fractional rotations: 0.25turn = 90deg. | Widely |
<time>
The standard CSS data type for durations. It can be defined in seconds (s) or milliseconds (ms).
Time units
Used for transition and animation durations and delays.
| Unit | Measures | Notes | Baseline |
|---|---|---|---|
s | Seconds | Cleaner for human-readable durations: 0.3s, 1s. | Widely |
ms | Milliseconds | Better when chaining or doing math with JS-derived durations. | Widely |
<resolution>
A media query property that describes the pixel density of the output device (like a 'Retina' display). It allows you to provide higher-quality images only for screens that can actually see the difference.
Open the <resolution> reference →
Resolution units
Used in media queries and the image-resolution property to target screens by pixel density.
| Unit | Measures | Notes | Baseline |
|---|---|---|---|
dpi | Dots per inch | Standard print density unit. 96dpi = 1dppx. | Widely |
dpcm | Dots per centimeter | Metric counterpart to dpi. Rarely used. | Widely |
dppx | Dots per CSS pixel | Most useful on the web. 1dppx = standard density, 2dppx = Retina. | Widely |
x | Alias for dppx | Shorthand. 2x is the same as 2dppx. | Widely |
<percentage>
A CSS data type representing a value relative to something else (usually the parent element's size or another property's value).
Open the <percentage> reference →
Percentage
A value relative to another value. The reference depends on the property: width and inline padding resolve against the parent's inline size, line-height against the element's font size, and so on. Always check the property's spec when in doubt.
| Unit | Measures | Notes | Baseline |
|---|---|---|---|
% | Relative to a contextual reference value | What the percentage measures depends entirely on the property: parent width, parent height, font size, line height, etc. The single most context-dependent unit in CSS. | Widely |
Where to go from here
If you're picking up CSS units for the first time, start with rem, %, and dvh for layout, and add container query units (cqi, cqb) when you build components that need to scale independently of the page. The article Modern CSS units you should know walks through the most useful new ones with examples.