CSS Sizing & Units
px, %, em, rem, vw, vh — units are the vocabulary of size. Choosing the right one is the difference between a layout that adapts and one that breaks the moment someone zooms.
1. Absolute vs relative
| Unit | Relative to | Best for |
|---|---|---|
px | Nothing (fixed) | Borders, shadows, fine detail |
% | The parent's size | Fluid widths |
em | The element's own font size | Padding that scales with text |
rem | The root font size | Type scale, consistent spacing |
vw / vh | 1% of viewport width/height | Full-screen sections, hero type |
The modern default: rem for font sizes and spacing (respects the user's browser settings), % or Flexbox/Grid for fluid widths, px only where optical precision matters.
2. min, max, and clamp
content {
width: 90%;
max-width: 720px; /* never wider */
min-height: 60vh; /* never shorter */
}
h1 {
font-size: clamp(28px, 5vw, 56px); /* fluid type with limits */
}max-width is the single most useful responsive property: fluid below the cap, capped above it. clamp(min, preferred, max) does the same for anything in one line — the headline above scales with the viewport but never leaves its bounds.
3. Try it yourself
Make the article fluid-but-readable: width: 90% with max-width: 560px, centered with auto margins, and give the heading a fluid clamp(24px, 6vw, 48px) size. Resize the preview pane!
4. Quiz — check your understanding
CSS Sizing & Units Quiz
4 questions · pass at 60%Q1. 1rem is relative to…
Q2. Which guarantees an element is fluid but never exceeds 720px?
Q3. 50vw equals…
Q4. clamp(1rem, 2.5vw, 2rem) returns…
Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.