Absolute vs Relative Units
Every length value in CSS falls into one of two families. Absolute units like px always mean the same physical size no matter what. Relative units like %, rem, em, vw, and vh are calculated based on something else — a parent element, the root font size, or the browser window — which is exactly what makes responsive design possible.
- ✓Absolute units (px) are fixed and predictable, but don't adapt to screen size or user preferences.
- ✓Relative units (%, rem, em, vw, vh) scale based on context, which is what lets a page respond to different devices.
- ✓Most real-world CSS mixes both — px for small fixed details, relative units for anything that should adapt.
The Fixed, Predictable Unit
A pixel is the most literal unit — 1px is always 1px, regardless of the parent element or the user's settings. It's great for things that should never change size: a 1px border, a 2px underline, a small fixed icon.
.card { border: 1px solid #f7dcc4; padding: 16px; border-radius: 12px; }
px doesn't respond when a user increases their browser's default font size for accessibility — that's the main reason it's avoided for font-size in production CSS.
Relative to the Parent
A percentage value is always relative to the corresponding property of the parent element — width: 50% means half the parent's width, not half the screen.
.sidebar { width: 30%; } .content { width: 70%; }
Relative to Font Size
Both rem and em are based on font size, but relative to different things. rem is always relative to the root (<html>) font size — usually 16px by default. em is relative to the font size of its own element, which means it can compound when nested.
The root <html> element's font size — consistent no matter where it's used.
The current element's own font size — can compound in nested elements.
html { font-size: 16px; } h1 { font-size: 2rem; } /* = 32px, always */ p { font-size: 1rem; } /* = 16px, always */
Reach for rem as your default for font-size and spacing. It respects the user's browser font-size setting for accessibility, without the compounding surprises em can cause in deeply nested elements.
Relative to the Viewport
vw and vh are relative to the browser window itself — 1vw is 1% of the viewport's width, 1vh is 1% of its height. They're useful for elements that should genuinely scale with screen size, like a full-height hero section.
.hero { width: 100vw; height: 60vh; }
A Few Values Skip Units Entirely
Not every CSS value needs a unit. line-height commonly takes a bare number (a multiplier of the font size), and keywords like auto let the browser calculate a value for you.
p { line-height: 1.6; /* unitless — 1.6x the font size */ } .centered { width: 800px; margin: 0 auto; /* auto centers it horizontally */ }
px vs rem — When It Actually Matters
Breaking Down What You Just Learned
Absolute vs relativepx is fixed; %, rem, em, vw, and vh all scale based on something else.
Percentages% sizes an element relative to its parent's corresponding property.
rem vs emrem always references the root font size; em references the current element and can compound.
Viewport unitsvw and vh size elements as a percentage of the browser window's width or height.
Default to remUse rem for font-size and spacing so pages respect user accessibility settings.
Try It Yourself
Take a page from earlier in the course and convert every font-size from px to rem. Then give one section a width of 50vw and confirm it resizes as you shrink and widen the browser window.
Build a Unit-Mixed Layout
Practicing when to reach for which unit
Create day22.html linked to a stylesheet and build the following on the page.
- Set the root html font-size, then size all headings and paragraphs with rem.
- Build a two-column layout using % widths for each column.
- Give a full-width banner section height: 40vh so it scales with the viewport.
- Use px only for a border and a border-radius on one card element.
- Center a fixed-width container with a px width and margin: 0 auto.
Recap
Fixed and predictable — best for borders and small details that shouldn't scale.
Relative to the parent element's own size — great for flexible column widths.
Font-based units — rem references the root, em references the current element.
vw and vh scale directly with the browser window's width and height.
Key Takeaways
- px is fixed and reliable, but doesn't respect user font-size accessibility settings.
- % sizes an element relative to its parent — the same value produces different results in different contexts.
- rem is relative to the root font size and stays consistent no matter how deeply an element is nested.
- em is relative to the current element's font size and can compound when nested inside other em-sized elements.
- vw and vh tie a size directly to the browser viewport — ideal for full-width or full-height sections.