Complete reference of all CSS units and measurements
This comprehensive reference lists all CSS units organized by category. Units define measurements for lengths, angles, time, resolution, and percentages. Understanding units is essential for creating responsive, accessible designs.
Each unit includes a description and link to the official W3C specification. Click section headings to view related tutorials with practical examples.
| Unit | Description | Links |
|---|---|---|
px |
Pixels - reference pixel (1/96th of 1 inch), not physical pixels | Demo Spec |
cm |
Centimeters - 1cm = 96px/2.54 | Demo Spec |
mm |
Millimeters - 1mm = 1/10th of 1cm | Demo Spec |
q |
Quarter-millimeters - 1q = 1/40th of 1cm (precise print work) | Spec |
in |
Inches - 1in = 2.54cm = 96px | Demo Spec |
pt |
Points - 1pt = 1/72nd of 1in (used in print) | Demo Spec |
pc |
Picas - 1pc = 1/6th of 1in = 12pt | Demo Spec |
| Unit | Description | Links |
|---|---|---|
em |
Relative to parent element's font-size (compounds) | Demo Spec |
rem |
Relative to root (html) font-size (typically 16px) | Demo Spec |
ex |
Height of lowercase x in element's font | Demo Spec |
ch |
Width of "0" character in element's font (useful for monospace) | Demo Spec |
cap |
Height of capital letters in element's font | Demo Spec |
ic |
Width of "水" (CJK water ideograph) in element's font | Demo Spec |
lh |
Line height of the element | Demo Spec |
rlh |
Line height of the root element | Demo Spec |
| Unit | Description | Links |
|---|---|---|
vw |
1% of viewport width | Demo Spec |
vh |
1% of viewport height | Demo Spec |
vmin |
1% of viewport's smaller dimension | Demo Spec |
vmax |
1% of viewport's larger dimension | Demo Spec |
vi |
1% of viewport in inline direction (width in LTR languages) | Demo Spec |
vb |
1% of viewport in block direction (height in LTR languages) | Demo Spec |
| Unit | Description | Links |
|---|---|---|
dvh |
Dynamic viewport height - adjusts as mobile browser UI shows/hides | Demo Spec |
dvw |
Dynamic viewport width | Demo Spec |
svh |
Small viewport height - assumes browser UI is shown (smallest) | Demo Spec |
svw |
Small viewport width | Demo Spec |
lvh |
Large viewport height - assumes browser UI is hidden (largest) | Demo Spec |
lvw |
Large viewport width | Demo Spec |
dvi |
Dynamic viewport inline dimension | Demo Spec |
dvb |
Dynamic viewport block dimension | Demo Spec |
svmin |
Small viewport smaller dimension (min of svw/svh) | Spec |
svmax |
Small viewport larger dimension (max of svw/svh) | Spec |
lvmin |
Large viewport smaller dimension (min of lvw/lvh) | Spec |
lvmax |
Large viewport larger dimension (max of lvw/lvh) | Spec |
dvmin |
Dynamic viewport smaller dimension (min of dvw/dvh) | Spec |
dvmax |
Dynamic viewport larger dimension (max of dvw/dvh) | Spec |
| Unit | Description | Links |
|---|---|---|
cqw |
1% of query container's width | Demo Spec |
cqh |
1% of query container's height | Demo Spec |
cqi |
1% of query container's inline size (most useful) | Demo Spec |
cqb |
1% of query container's block size | Demo Spec |
cqmin |
1% of query container's smaller dimension | Demo Spec |
cqmax |
1% of query container's larger dimension | Demo Spec |
| Unit | Description | Links |
|---|---|---|
fr |
Flexible fraction - distributes remaining space proportionally in grid tracks | Demo Spec |
| Unit | Description | Links |
|---|---|---|
deg |
Degrees - full circle = 360deg (most common) | Demo Spec |
rad |
Radians - full circle = 2π rad (≈ 6.2832rad) | Demo Spec |
grad |
Gradians - full circle = 400grad | Demo Spec |
turn |
Turns - full circle = 1turn (most intuitive) | Demo Spec |
| Unit | Description | Links |
|---|---|---|
s |
Seconds - used in transitions and animations | Demo Spec |
ms |
Milliseconds - 1000ms = 1s | Demo Spec |
| Unit | Description | Links |
|---|---|---|
dpi |
Dots per inch - used in media queries for screen density | Demo Spec |
dpcm |
Dots per centimeter | Demo Spec |
dppx |
Dots per pixel unit (1dppx = 96dpi, matches device pixel ratio) | Demo Spec |
| Unit | Description | Links |
|---|---|---|
% |
Percentage - relative to parent element's corresponding property | Demo Spec |
Choosing the right unit is crucial for creating responsive, accessible designs. Different units serve different purposes, and understanding when to use each improves your layouts and user experience.
rem to respect user font preferences and avoid compounding issues with emem for padding and margins within components to maintain proportions when font size changesch for maximum line width - 45-75ch creates readable text blocksdvh instead of vh on mobile to account for browser UI (address bar, toolbars)cqi or cqw for truly modular, container-based responsive designpx for crisp 1px or 2px borders that don't scale unnecessarilypt, cm, in) for predictable physical dimensionsturn for intuitive rotation values (0.25turn = 90deg, 0.5turn = 180deg)ms for precise timing control, s for readability with longer durationspx and rem randomly within the same component| Use Case | Recommended Unit | Reason |
|---|---|---|
| Body font size | 100% or 1rem | Respects user's browser default |
| Heading sizes | rem | Scales with user preferences |
| Button padding | em | Scales with button's font size |
| Max content width | ch or rem | Creates readable line lengths |
| Hero section height | dvh | Adapts to mobile browser UI |
| Card component | cqi | Responds to container, not viewport |
| Transition duration | ms | Precise control (200ms, 350ms) |
| Border width | px | Crisp, fixed-size borders |