Box Model Fundamentals

The CSS box model defines how element dimensions are calculated. Understanding it prevents layout surprises and enables predictable spacing.

Four Areas (inside to outside):

1. Content: The actual content (text, images)
2. Padding: Space between content and border
3. Border: Line around the padding
4. Margin: Space outside the border

Two Box-Sizing Models:

• Content-box (default): width = content only
• Border-box: width = content + padding + border

First Principle: box-sizing: border-box makes sizing intuitive - what you set is what you get.

Mental Model: Think of Russian nesting dolls - each layer adds to the total size (unless using border-box).

Universal Box-Sizing Reset:

*, *::before, *::after {
  box-sizing: border-box;
}

Key Insight: Margin collapse between adjacent elements is a feature, not a bug.

Related: CSS Layout Fundamentals, Spacing Systems