Chapter 5 — The Complete Box Model

Make dimensions predictable and constrain components without unnecessarily fixing their size.

New concepts

Content, padding, border, margin, content-box, border-box, min/max-width, and min/max-height.

Read the Phase 4 gauge

What changed?

Earlier phases manually account for padding and borders. Border-box now keeps those parts inside declared dimensions, while constraints let boxes grow or shrink safely.

Lessons

  1. 1. Content-box versus border-box
  2. 2. Responsive size constraints
  3. 3. Constrained Flexbox cards

Checkpoint

Explain why a 300px content-box with padding can exceed 300px, then rebuild it with border-box and a useful max-width.