Vad är CSS box model?

Question

Accepted Answer

Varje element i CSS är en rektangulär **box** bestående av fyra lager, från insidan och ut: **content**, **padding**, **border** och **margin**. Att förstå hur de kombineras är grunden för 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 klassiska fällan: total bredd

Med **standardvärdet** `box-sizing: content-box` är den renderade bredden *större* än `width` du anger, eftersom padding och border läggs på:

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

Detta överraskar nybörjare — du anger `width: 200px` men det tar upp 250px. Lösningen som alla använder:

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

## padding vs margin

- **padding** — utrymme *innanför* gränsen; det är en del av elementet (klickbar, tar bakgrundsfärg).
- **margin** — utrymme *utanför* gränsen; transparent, och angränsande vertikala marginaler **kollapsar** (det större av två angränsande marginaler vinner).

## Varför det är viktigt

Box model styr hur stora element faktiskt är och hur de avstånd från varandra.

Att veta att standardmodellen lägger till padding/border till `width` (och varför `border-box` är nästan universell fix) förhindrar den vanligaste layoutstorlek-förvirrningen.