CSS Units Cheatsheet — Every Unit Explained

CSS offers a variety of units for sizing elements, spacing, and typography. Choosing the right unit affects accessibility, responsiveness, and maintenance. This reference covers every CSS unit with guidance on when each one is the best choice.

Absolute Units

Absolute units have a fixed size regardless of context. In practice, px is the only absolute unit used for screen-based design.

Unit	Name	Equivalent	Use case
`px`	Pixels	1/96 of an inch	Borders, shadows, fine-grained control
`pt`	Points	1/72 of an inch	Print stylesheets
`pc`	Picas	12 points	Print stylesheets
`in`	Inches	96 pixels	Print stylesheets
`cm`	Centimeters	~37.8 pixels	Print stylesheets
`mm`	Millimeters	~3.78 pixels	Print stylesheets
`Q`	Quarter-millimeters	0.25mm	Print stylesheets (rare)

When to use px: Borders (border: 1px solid), box shadows, and any element where you need exact pixel-level precision. Avoid px for font sizes and spacing that should scale with user preferences.

Relative Units — Font-based

These units scale relative to a font size, making them ideal for building proportional, accessible layouts.

Unit	Relative to	Example
`em`	Font size of the current element	`padding: 1.5em` (1.5x the element’s font size)
`rem`	Font size of the root element (`<html>`)	`font-size: 1.125rem` (18px if root is 16px)
`ex`	x-height of the current font	Rarely used; roughly half the `em`
`ch`	Width of the “0” (zero) character	`max-width: 65ch` for readable line lengths
`cap`	Height of capital letters	Experimental; limited support
`ic`	Width of the CJK “water” ideograph	CJK typography
`lh`	Line height of the element	Useful for vertical rhythm
`rlh`	Line height of the root element	Vertical rhythm relative to root

em vs rem

	`em`	`rem`
Relative to	Parent element’s font size	Root `<html>` font size
Compounds	Yes (nested elements multiply)	No (always relative to root)
Best for	Component-internal spacing	Global sizing, font sizes, layout spacing
Gotcha	`1.5em` inside a `1.5em` = `2.25em`	Always predictable

/* rem for font sizes — predictable scaling */
h1 { font-size: 2rem; }      /* 32px at default 16px root */
h2 { font-size: 1.5rem; }    /* 24px */
body { font-size: 1rem; }    /* 16px */

/* em for component-internal spacing — scales with the component */
.button {
  font-size: 1rem;
  padding: 0.5em 1em;        /* scales if font-size changes */
}

Relative Units — Viewport

Viewport units are relative to the browser window dimensions.

Unit	Relative to	Example
`vw`	1% of viewport width	`width: 50vw` (half the screen width)
`vh`	1% of viewport height	`height: 100vh` (full screen height)
`vmin`	1% of the smaller dimension	Useful for elements that should fit in any orientation
`vmax`	1% of the larger dimension	Less common
`dvw`	1% of dynamic viewport width	Accounts for mobile browser chrome
`dvh`	1% of dynamic viewport height	Accounts for mobile address bar showing/hiding
`svw`	1% of small viewport width	Smallest possible viewport
`svh`	1% of small viewport height	With all browser UI visible
`lvw`	1% of large viewport width	Largest possible viewport
`lvh`	1% of large viewport height	With browser UI hidden

The mobile viewport problem: On mobile browsers, 100vh can be taller than the visible area because the address bar is part of the viewport calculation. Use 100dvh for full-height layouts that account for the dynamic browser chrome, or 100svh for the safe minimum height.

/* Full-height hero that works on mobile */
.hero {
  min-height: 100dvh;       /* dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
}

Percentage (%)

Percentages are relative to the parent element’s corresponding property.

Context	Relative to
`width: 50%`	Parent’s width
`height: 50%`	Parent’s height (parent must have explicit height)
`padding: 10%`	Parent’s width (even for top/bottom padding)
`margin: 10%`	Parent’s width (even for top/bottom margin)
`font-size: 120%`	Parent’s font size
`line-height: 150%`	Element’s own font size
`transform: translateX(50%)`	Element’s own width

The fact that vertical padding and margin percentages are based on the parent’s width (not height) is one of CSS’s most surprising behaviors. This quirk is actually useful for creating aspect ratios:

/* 16:9 aspect ratio using padding trick (pre-aspect-ratio) */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;    /* 9/16 = 0.5625 */
}

/* Modern approach */
.video-wrapper {
  aspect-ratio: 16 / 9;
}

Container Query Units

These units are relative to a query container’s dimensions, enabling component-level responsive design.

Unit	Relative to
`cqw`	1% of container’s width
`cqh`	1% of container’s height
`cqi`	1% of container’s inline size
`cqb`	1% of container’s block size
`cqmin`	Smaller of `cqi` or `cqb`
`cqmax`	Larger of `cqi` or `cqb`

.card-container {
  container-type: inline-size;
}

.card-title {
  font-size: clamp(1rem, 4cqi, 2rem);
}

The clamp() Function

clamp() lets you set a responsive value with minimum and maximum bounds. It works with any unit.

/* Fluid typography */
font-size: clamp(1rem, 2.5vw, 2rem);
/*              min    preferred   max */

/* Fluid spacing */
padding: clamp(1rem, 3vw, 3rem);

/* Fluid width */
width: clamp(300px, 50%, 800px);

Quick Reference: Which Unit When?

Property	Recommended Unit	Why
Font size	`rem`	Respects user preferences, predictable
Line height	Unitless number (e.g., `1.5`)	Scales proportionally with font size
Padding/margin	`rem` or `em`	Scales with text size
Width	`%`, `vw`, or `ch`	Responsive to container or viewport
Max-width	`ch` or `rem`	`65ch` for readable prose
Height	`dvh` or `auto`	Avoid fixed heights when possible
Borders	`px`	Fine-grained control needed
Box shadows	`px`	Fine-grained control needed
Media queries	`em`	Consistent across zoom levels
Border radius	`px` or `%`	`px` for subtle, `%` for circles

Convert between px and rem with the px to rem Converter, or explore all units in the CSS Units Reference.