Wat is het CSS box model?

Question

Accepted Answer

Elk element in CSS is een rechthoekige **box** gemaakt van vier lagen, van binnen naar buiten: **content**, **padding**, **border** en **margin**. Het begrijpen hoe deze samenwerken is de basis van alle layouts.

```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 */
}
```

## Waarom het belangrijk is

Met de **standaard** `box-sizing: content-box` is de weergegeven breedte *groter* dan de `width` die je hebt ingesteld, omdat padding en border erbovenop worden toegevoegd:

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

Dit verrast beginners — je stelt `width: 200px` in maar het neemt 250px in beslag. De oplossing die iedereen gebruikt:

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

## padding vs margin

- **padding** — ruimte *binnen* de border; het maakt deel uit van het element (klikbaar, krijgt achtergrondkleur).
- **margin** — ruimte *buiten* de border; transparant, en aangrenzende verticale margins **overlappen** (de grotere van twee aangrenzende margins wint).

## Waarom het belangrijk is

Het box model bepaalt hoe groot elementen werkelijk zijn en hoe ze uit elkaar staan.

Weten dat het standaardmodel padding/border toevoegt aan `width` (en waarom `border-box` de bijna universele oplossing is) voorkomt de meest voorkomende layout-sizing verwarring.