Hva er CSS box-modellen?

Question

Accepted Answer

Hvert element i CSS er en rektangulær **boks** laget av fire lag, innenfra og utover: **content**, **padding**, **border** og **margin**. Å forstå hvordan de fungerer sammen er grunnlaget for 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 */
}
```

## Det klassiske gotcha: total bredde

Med **standard** `box-sizing: content-box` er den gjengitte bredden *større* enn `width` du setter, fordi padding og border legges på toppen:

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

Dette overrasker nybegynnere — du setter `width: 200px` men det opptar 250px. Løsningen alle bruker:

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

## padding vs margin

- **padding** — plass *inne* i border; det er en del av elementet (klikkbar, får bakgrunnsfarge).
- **margin** — plass *utenfor* border; gjennomsiktig, og tilstøtende vertikale marginer **kollapser** (den større av to berørende marginer vinner).

## Hvorfor det betyr noe

Box-modellen styrer hvor store elementer faktisk er og hvordan de avstander hverandre.

Å vite at standardmodellen legger til padding/border til `width` (og hvorfor `border-box` er den nesten universelle løsningen) forhindrer den vanligste layout-sizing forvirringen.