Reference

Cheatsheet

The whole system on one page.

Every CSS unit at a glance: formula, reference, and common use. For the nuance behind each, follow through to its full article.

Absolute lengths

Fixed on screen via the anchor 1in = 96px. → Full article

Unit Equals In px Common use
px 1/96in 1 Borders, icons, crisp details
pt 1/72in ≈ 1.333 Print typography
pc 12pt 16 Print (picas)
in anchor 96 Print / physical output
cm 96px/2.54 ≈ 37.8 Print (metric)
mm 1cm/10 ≈ 3.78 Print (small)
Q 1mm/4 ≈ 0.945 Japanese print typography

Font-relative — local

Resolve against the element’s own font. → Full article

Unit Formula Relative to Common use All engines since
em × computed font-size Element font-size (inherited on font-size) Component-internal proportions forever
ch advance of 0 Element font Reading column width (65ch) forever
ex x-height Element font Lowercase-aware alignment forever
cap cap height Element font Icons next to headings Dec 2023
ic advance of 水 Element font CJK layout Sep 2022
lh computed line-height Element line-height Icon = one line Nov 2023

Font-relative — root

Same metrics, measured on the root element. → Full article

Unit Formula Relative to Common use All engines since
rem × root font-size Root font-size Type scale, spacing tokens forever
rch root advance of 0 Root font System-wide text measure Jan 2026
rex root x-height Root font Root-locked alignment Jan 2026
rcap root cap height Root font Root-locked cap sizing Jan 2026
ric root advance of 水 Root font Root-locked CJK measure Jan 2026
rlh root line-height Root element Vertical rhythm (2rlh) Nov 2023

The four bold rows are the newest units in CSS: Chromium and Safari had them from 2023, Firefox only from version 147 (January 2026). See the support story.

Percentage

Reference is set by the property. → Full article

Property % relative to
width / inline-size Containing block inline-size
height / block-size Containing block block-size (if defined)
padding-* / margin-* Containing block inline-size (always)
transform: translate() The element’s own size
background-position (container − image) per axis
border-radius Border-box width (horizontal radii) / height (vertical)
font-size Inherited font-size
top/left/right/bottom Containing block, matching axis

Viewport

1×unit = 1% of the chosen viewport dimension. The default family is defined against the large one. → Full article

Axis / strategy Default Small Large Dynamic
Width vw svw lvw dvw
Height vh svh lvh dvh
Inline vi svi lvi dvi
Block vb svb lvb dvb
Smaller axis vmin svmin lvmin dvmin
Larger axis vmax svmax lvmax dvmax 
svh → safe (chrome expanded)   lvh → full (chrome retracted)
dvh → current (tracks chrome)  vh  = lvh (by definition)

vw/vh/vmin/vmax are as old as CSS3; the logical (vi/vb) and small/large/dynamic families reached all engines in Nov 2022.

Container query

1×unit = 1% of the nearest query container. Needs container-type. → Full article

Unit Relative to
cqw Container width
cqh Container height
cqi Container inline size (most used)
cqb Container block size
cqmin Smaller container dimension
cqmax Larger container dimension 
No eligible container → falls back to the small viewport (sv*)

All engines since Feb 2023 (Chrome 105, Safari 16, Firefox 110).

Flexible length (Grid)

→ Full article

Unit Meaning Notes
fr A share of the grid’s leftover space CSS Grid only (not flexbox). 1fr = minmax(auto, 1fr); use minmax(0, 1fr) to allow shrinking

Special — not lengths

→ Full article

Angles: 360deg = 400grad = 2π rad = 1turn

Unit Full circle Use
deg 360 Rotations, gradients, hue
grad 400 Rare (surveying)
rad 2π ≈ 6.283 From JS trig
turn 1 Clean fractions

Time: 1s = 1000ms (unitless is invalid)

Unit Use
s Longer durations
ms Short UI timings

Frequency: 1kHz = 1000Hz

Unit Use
Hz, kHz Speech CSS — effectively unused

Resolution: 1x = 1dppx = 96dpi

Unit Use
dppx / x Density media queries, image-set()
dpi Dots per inch (print)
dpcm Dots per cm (rare)

Math functions

Where units get combined. → Full article

Function Does Units
calc() arithmetic across types; +/- need spaces mixes them
min() / max() smallest / largest argument — a ceiling / a floor mixes them
clamp(a, b, c) max(a, min(b, c)) — the fluid-type workhorse mixes them
round(strategy?, v, step) snap to a step; nearest/up/down/to-zero keeps them
mod() / rem() remainder — sign follows divisor / dividend keeps them
abs() / sign() magnitude / direction as -1, 0, 1 keeps / drops
hypot() √(a²+b²…) — diagonals as a length keeps them
pow sqrt log exp exponents, roots, logs — type scales numbers only
sin cos tan angle → number angle in
asin acos atan atan2 number → angle angle out
pi e infinity NaN constants; calc(infinity * 1px) = pill radius — 
clamp(2rem, 5vw + 1rem, 4rem)   ← keep a rem term, or zoom won't grow the text
round(down, 100% / 3, 1px)      ← fluid columns that still land on whole pixels

Not yet cross-browser: typed arithmetic (Chrome 140, Safari 26), progress(), sibling-index(), calc-size(), if(), random().

Need the reasoning, not just the value? Start from the Decision Tree, or open any unit’s full article above. New to a term? See the Glossary.

Sources