CSS Units Cheatsheet — Every Unit Explained
All CSS units explained with use cases: absolute units (px, pt, cm), relative units (em, rem, vw, vh, %), and when to use each one for responsive design.
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.
Comments