What is the CSS box model?

Question

Accepted Answer

Every element in CSS is a rectangular **box** made of four layers, from inside out: **content**, **padding**, **border**, and **margin**. Understanding how they combine is the foundation of all layout.

```text
┌─────────────── margin ───────────────┐  ← space OUTSIDE, between elements
│  ┌──────────── border ────────────┐  │
│  │  ┌───────── padding ────────┐  │  │  ← space INSIDE, around content
│  │  │       content            │  │  │  ← text/image (width × height)
│  │  └──────────────────────────┘  │  │
│  └─────────────────────────────────┘  │
└────────────────────────────────────────┘
```

```css
.box {
  width: 200px;      /* content width (in the default box model) */
  padding: 20px;     /* inner spacing — pushes content inward */
  border: 5px solid; /* the visible edge */
  margin: 10px;      /* outer spacing — separates from neighbors */
}
```

## The classic gotcha: total width

With the **default** `box-sizing: content-box`, the rendered width is *bigger* than the `width` you set, because padding and border are added on top:

```text
Total width = 200 (content) + 2×20 (padding) + 2×5 (border) = 250px
```

This surprises beginners — you set `width: 200px` but it occupies 250px. The fix everyone uses:

```css
* { box-sizing: border-box; } /* now width INCLUDES padding + border → 200px total */
```

## padding vs margin

- **padding** — space *inside* the border; it's part of the element (clickable, takes background color).
- **margin** — space *outside* the border; transparent, and adjacent vertical margins **collapse** (the larger of two touching margins wins).

## Why it matters

The box model governs how big elements actually are and how they space apart.

Knowing that the default model adds padding/border to `width` (and why `border-box` is the near-universal fix) prevents the most common layout-sizing confusion.