Roadmap › HTML5 & CSS3 — Semantic Markup to Responsive Layouts › Module: CSS Fundamentals
Lessons in this course (11)
5. The box model, units and positioning
Basic★ Must knowLesson 5 of 11
Every element is a box: content → padding → border → margin.
css
*, *::before, *::after { box-sizing: border-box; } /* width includes padding + border — the modern default */
.card { width: 300px; padding: 16px; border: 1px solid #ddd; margin: 12px; }
/* content-box: rendered width = 300 + 32 + 2 = 334px; border-box: rendered width = 300px */Margin collapsing: vertical margins of adjacent blocks combine into the larger one (not in flex/grid containers).
| Unit | Relative to | Use |
|---|---|---|
px | Fixed | Borders, small details |
rem | Root font size | Font sizes, spacing (respects user zoom settings) |
em | Parent/element font size | Padding that scales with its text |
% | Parent | Fluid widths |
vw / vh / dvh | Viewport (dynamic viewport for mobile bars) | Full-screen sections |
fr | Free space in Grid | Grid columns |
ch | Width of "0" | Readable line length (max-width: 70ch) |
Position:
| Value | Behaviour |
|---|---|
static | Normal flow (default) |
relative | Offset from its normal place; becomes containing block for absolute children |
absolute | Removed from flow; positioned to nearest positioned ancestor |
fixed | Relative to the viewport (stays when scrolling) |
sticky | Normal until a scroll threshold, then sticks (top: 0) |
z-index works only on positioned (or flex/grid) elements and within its stacking context.