CSS - Box Model
Overview
Quick links: Exercises • Checks • Print as PDF
Estimated time: 10 minutes
The box model underpins layout. Mastering it helps you reason about spacing and sizing without surprises.
Learning Objectives
- Explain content, padding, border, and margin.
- Identify margin collapsing and how to avoid it.
Details & Examples
Every element is a rectangular box: content → padding → border → margin.
Padding adds space inside the border; margin adds space outside.
Margin Collapsing
Vertical margins between block elements may collapse into a single margin. Add padding/border to avoid when undesired.
Checks for Understanding
- Which part of the box model adds space inside vs outside the border?
Show answers
- Padding is inside; margin is outside.
Exercises
- Visually debug a layout using outlines to show box boundaries.
- Create a card with padding and margin that doesn’t collapse with adjacent elements.
Suggested answers
*{ outline:1px dashed #64748b; outline-offset:-1px }(for debugging only)- Add padding or border to prevent vertical margin collapse.