A quick reference for all CSS length units — absolute and relative — with clear guidance on when to use px, rem, em, vw, vh, ch, and more.
| Code / Syntax | Description |
|---|---|
px | Pixel (1/96th of an inch) — Borders, shadows, fine details |
pt | Point (1/72nd of an inch) — Print stylesheets |
cm | Centimeter — Print stylesheets |
mm | Millimeter — Print stylesheets |
in | Inch (96px) — Print stylesheets |
| Code / Syntax | Description |
|---|---|
rem | Relative to root (<html>) font size — 1.5rem = 24px if root is 16px |
em | Relative to parent element font size — 1.5em = 1.5x parent's font size |
ch | Width of the "0" character — 60ch = ~60 characters wide |
ex | Height of the "x" character — Rarely used |
lh | Line height of the element — Spacing relative to line height |
| Code / Syntax | Description |
|---|---|
vw | 1% of viewport width — 100vw = full viewport width |
vh | 1% of viewport height — 100vh = full viewport height |
vmin | 1% of smaller viewport dimension — Scales with the smaller axis |
vmax | 1% of larger viewport dimension — Scales with the larger axis |
dvh | Dynamic viewport height — Accounts for mobile browser chrome |
svh | Small viewport height — Smallest possible viewport |
lvh | Large viewport height — Largest possible viewport |
| Code / Syntax | Description |
|---|---|
cqw | 1% of container query width |
cqh | 1% of container query height |
% | Relative to parent element's size for that property |
| Code / Syntax | Description |
|---|---|
rem | Font sizes, spacing, padding, media queries — scales with user preferences |
em | Component-internal spacing, icon sizing — scales with component font size |
px | Borders, box shadows, outlines — fine details that should not scale |
vw / vh / dvh | Full-screen sections, responsive typography, full-width elements |
ch | Optimal line length (max-width: 65ch), input widths |
% | Fluid layouts, responsive images (max-width: 100%), relative positioning |
| Code / Syntax | Description |
|---|---|
font-size: rem | Scales with user preferences |
line-height: unitless (1.5) | Scales with font size |
padding/margin: rem or em | Consistent spacing |
border-width: px | Should not scale |
box-shadow: px | Fine detail |
width: %, fr, or rem | Fluid layouts |
max-width (text): ch | Readable line length |
height (full page): dvh | Accounts for mobile chrome |
media queries: rem | Respects user font size |
Found this cheat sheet useful? Check out our other references and tools.