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. px is acceptable for border widths, box shadows, and fine details, but using px for font-size or 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