Mikä on CSS-laatikoiden malli?

Question

Accepted Answer

Jokainen CSS:n elementti on nelikulmainen **box**, joka koostuu neljästä kerroksesta sisältä ulos: **content**, **padding**, **border** ja **margin**. Ymmärtäminen siitä, miten ne yhdistyvät, on kaiken asettelun perusta.

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

## Klassinen ongelma: kokonaisleveys

**Oletusarvon** `box-sizing: content-box` kanssa renderöity leveys on *suurempi* kuin asettamasi `width`, koska padding ja border lisätään päälle:

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

Tämä yllättää aloittelevat kehittäjät — asitat `width: 200px`, mutta se vie tilaa 250px. Ratkaisu, jota kaikki käyttävät:

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

## padding vs margin

- **padding** — tila *reunan sisäpuolella*; se on osa elementtiä (klikattavissa, saa taustavärin).
- **margin** — tila *reunan ulkopuolella*; läpinäkyvä ja vierekkäiset pystysuorat marginaalit **romahtavat** (suurempi kahdesta koskettavasta marginaalista voittaa).

## Miksi se on tärkeää

Laatikoiden malli määrää, kuinka suuret elementit oikeasti ovat ja kuinka ne etäältään eroavat toisistaan.

Tieto siitä, että oletusarvoinen malli lisää padding/border `width`-arvoon (ja miksi `border-box` on lähes universaali ratkaisu) estää yleisimmän asettelun koon määrittelyn hämmennyksen.