Absolute Units
Absolute units have a fixed physical size and don't scale with anything:
px 1px = 1/96 of an inch (on screen — 1 device pixel at 1x DPR)
pt 1pt = 1/72 of an inch (print typography)
cm centimeters
mm millimeters
in inches
pc picas (1pc = 12pt)Use px for: borders (border: 1px solid), fixed-size UI elements like icons, box-shadow offsets, minimum/maximum dimensions.
Avoid px for: font sizes and layout spacing — px doesn't respect the user's browser font size preference.
em — Relative to Parent Font Size
/* If parent font-size = 16px: */
padding: 1em; /* 16px */
padding: 1.5em; /* 24px */
/* em compounds through nesting! */
.parent { font-size: 1.2em; } /* 16 × 1.2 = 19.2px */
.child { font-size: 1.2em; } /* 19.2 × 1.2 = 23.04px — compounding */Use em for: spacing that should scale with an element's own text size — padding inside buttons, line-height, icon sizes adjacent to text. The compounding can be a bug or a feature depending on the use case.
rem — Relative to Root Font Size
/* Root = html { font-size: 16px } (browser default) */
font-size: 1rem; /* 16px */
font-size: 1.5rem; /* 24px */
font-size: 0.875rem; /* 14px */
/* No compounding — always relative to :root */Use rem for: font sizes, most spacing/layout values. rem scales with the user's browser font size preference (accessibility), and doesn't compound. It is the recommended unit for font sizes in 2024.
Viewport Units
vw 1% of viewport width
vh 1% of viewport height
vmin 1% of the smaller dimension
vmax 1% of the larger dimension
/* New units (CSS Values Level 4) */
svh small viewport height (excludes mobile browser chrome)
lvh large viewport height (includes mobile browser chrome)
dvh dynamic viewport height (updates as chrome hides/shows)Use vh/vw for: full-screen sections (height: 100vh), hero images, viewport-relative typography (font-size: clamp(1rem, 4vw, 2rem)).
Avoid 100vh on mobile — on iOS, 100vh includes the address bar and causes content to be hidden. Use 100dvh or 100svh instead.
% — Relative to Parent
width: 50%; /* 50% of parent width */
height: 100%; /* 100% of parent height (parent must have explicit height) */
font-size: 120%; /* 120% of parent font-size (same compounding as em) */
transform: translateX(50%); /* 50% of the element's own width */Container Query Units (New)
/* cqi, cqb, cqw, cqh — relative to container, not viewport */
.card { container-type: inline-size; }
.card__title { font-size: clamp(1rem, 4cqi, 2rem); }
/* font-size scales with the card's width, not the viewport */The Practical Decision Guide
rem— font sizes, padding, margins, gapspx— borders, box-shadow, icons, fixed widthsem— spacing inside a component that should scale with its text%— widths in flex/grid, responsive imagesvw/vh/dvh— full-screen layouts, viewport-relative sizingch— max-width on prose containers (max-width: 65ch)
Convert CSS Units Instantly
Use ToolsVito's CSS Unit Converter to convert between px, rem, em, %, vw, and more with a configurable root font size.