CSS Units — The Complete ReferenceSkip to content
The complete reference<br>Every CSS unit,explained.<br>From the everyday px and rem to the fine print ofsvh, dvh and cqi: all 63 of them, with live examples wherever seeing beats reading.<br>Start reading→Which unit should I use?
On your screen now1rem = …1vw = …1vh = …1ch = …… display
01Absolutepx · cm · mm · in · pt · pc · QFixed measurements that stay constant regardless of context. The foundation of CSS sizing.→<br>02Font-relativeem · rem · ch · ex · cap · ic · lh · +5Units relative to font properties of the current or root element. The key to scalable typography.→<br>03Percentage%Formally a value rather than a unit, and context-dependent: the property decides what it is a percentage of.→<br>04Viewportvw · vh · svh · lvh · dvh · vmin · vmax · +17Units based on the browser viewport size — including the modern small, large, and dynamic variants.→<br>05Containercqw · cqh · cqi · cqb · cqmin · cqmaxUnits relative to the nearest container query ancestor. The future of component-driven layouts.→<br>06FlexiblefrThe Grid fractional unit — a share of leftover space rather than a fixed length. Unique among CSS units.→<br>07Specialdeg · turn · rad · ms · s · dpi · +6Angles for transforms, durations for animations, and resolutions for media queries.→
Math functionsHow units combine inside calc, min, max and clamp.→Decision treePick your task — get the right unit and the why.→CheatsheetEvery unit’s formula and reference, at a glance.→GlossaryContaining block, advance measure, cap-height…→
⌘K search the units←→ turn chapters