CSS Units: Complete Reference
CSS has a rich set of units for expressing lengths. Choosing the right unit is one of the most important decisions for responsive, accessible web design.
1. Absolute Units
Fixed, physical measurements. Results are identical regardless of screen size or user settings.
| Unit | Name | Equivalent |
|---|---|---|
px | Pixels | 1px = 1/96 of 1 inch (on standard displays) |
pt | Points | 1pt = 1/72 of 1 inch |
cm | Centimeters | 1cm = 37.8px |
mm | Millimeters | 1mm = 3.78px |
in | Inches | 1in = 96px |
[!IMPORTANT] Use absolute units sparingly in web design.
pxis acceptable for border widths, box shadows, and fine details, but usingpxforfont-sizeor layout dimensions overrides user browser preferences for accessibility.
2. Relative Units: Font-Based
| Unit | Relative To | Best Used For |
|---|---|---|
em | Element's own font-size | Padding/margin that scales with its text |
rem | Root <html> font-size (usually 16px) | Typography, consistent global spacing |
ex | x-height of the current font | Rarely used |
ch | Width of the 0 character | Optimal text line lengths |
em vs rem in Practice
/* rem — predictable, doesn't compound */
h1 { font-size: 3rem; } /* Always 48px (if root = 16px) */
.card { padding: 1.5rem; } /* Always 24px */
/* em — compounds with parent (use intentionally) */
.btn {
font-size: 1rem;
padding: 0.75em 1.5em; /* Scales with the button's own font-size */
}
.btn--sm { font-size: 0.875rem; } /* padding automatically adjusts too */
3. Relative Units: Viewport-Based
| Unit | Meaning | Notes |
|---|---|---|
vw | 1% of viewport width | 100vw = full screen width |
vh | 1% of viewport height | 100vh bug on mobile (see below) |
vmin | 1% of the smaller of vw/vh | Useful for square elements |
vmax | 1% of the larger of vw/vh | |
svh | Small viewport height | Mobile: excludes browser chrome |
lvh | Large viewport height | Mobile: includes browser chrome |
dvh | Dynamic viewport height | ✅ Best for mobile hero sections |
svw, lvw, dvw | Width variants | Same pattern |
cqw | 1% of container query width | For container queries |
The Mobile vh Fix
/* ❌ 100vh is broken on iOS Safari (browser chrome is included) */
.hero { min-height: 100vh; }
/* ✅ dvh = dynamic viewport height — adjusts when browser chrome shows/hides */
.hero {
min-height: 100vh; /* Fallback */
min-height: 100dvh; /* Progressive enhancement */
}
4. The ch Unit for Readable Lines
/* Optimal reading line length: 45–75 characters */
.article-body {
max-width: 72ch; /* About 72 characters per line */
font-size: 1.125rem;
line-height: 1.7;
}
5. CSS Math Functions with Units
/* clamp(min, preferred, max) — the fluid sizing workhorse */
font-size: clamp(1rem, 2.5vw + 0.5rem, 2rem);
padding: clamp(1rem, 4vw, 3rem);
/* calc() — mix units in expressions */
.sidebar { width: calc(100% - 320px); }
.element { margin-top: calc(var(--space-4) * 2 + 1px); }
/* min() and max() */
.container { width: min(100%, 1200px); } /* Responsive max-width */
.image { width: max(300px, 50%); } /* At least 300px */
6. PX to REM Conversion Table
Assuming the default root font-size of 16px:
| px | rem | px | rem |
|---|---|---|---|
| 4px | 0.25rem | 40px | 2.5rem |
| 8px | 0.5rem | 48px | 3rem |
| 12px | 0.75rem | 56px | 3.5rem |
| 14px | 0.875rem | 64px | 4rem |
| 16px | 1rem | 80px | 5rem |
| 18px | 1.125rem | 96px | 6rem |
| 20px | 1.25rem | 128px | 8rem |
| 24px | 1.5rem | 160px | 10rem |
| 28px | 1.75rem | 192px | 12rem |
| 32px | 2rem | 256px | 16rem |
Formula: rem = pixels ÷ 16
7. When to Use Which Unit
| Property | Unit to Use | Why |
|---|---|---|
font-size (global) | rem | Respects user browser settings |
font-size (fluid) | clamp() | Smooth scaling |
padding, margin | rem or em | Scales with text |
border, outline | px | Fine details should be crisp |
box-shadow offset/blur | px | Physical shadow dimensions |
| Full-width layout | % or vw | Relative to container/viewport |
| Hero section height | dvh | Mobile-safe viewport unit |
| Text line width | ch | Content-relative measure |
| Grid/flex gaps | rem | Consistent spacing |