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 |
Put it to work with Px to rem, Css flex layout tool, Measurement converter, or Tailwind classes to css.
Found this cheat sheet useful? Check out our other references and tools.