Box Model

The CSS box model describes how every HTML element's total size is built up: content first, then padding (space inside the border), then the border itself, then margin (space outside the border, between elements). Every element is rendered as a rectangle following these rules, and misunderstanding them is the source of most early layout confusion.

• —Every layout bug — things overlapping, spacing looking wrong — traces back to the box model.
• —box-sizing: border-box (commonly used) changes how width and padding interact, simplifying sizing.
• —Margin collapses between elements in ways that surprise beginners — worth learning explicitly.

This is the exact lesson that covers this term in depth — with examples, diagrams, and a hands-on exercise.