Što je CSS box model?

Question

Accepted Answer

Svaki element u CSS-u je pravokutna **box** sastavljena od četiri sloja, iznutra prema vani: **content**, **padding**, **border** i **margin**. Razumijevanje kako se oni kombiniraju je temelj svih rasporeda.

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

## Klasična zamka: ukupna širina

S **default** `box-sizing: content-box`, prikazana širina je *veća* od `width` koju postavljate, jer se padding i border dodaju:

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

To iznenađuje početnike — postavljate `width: 200px` ali zauzima 250px. Ispravka koju svi koriste:

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

## padding naspram margin

- **padding** — prostor *unutar* bordera; dio je elementa (klikljiv, preuzima boju pozadine).
- **margin** — prostor *izvan* bordera; transparentan, i susjedne vertikalne margine **se sažimaju** (od dva susjedna margina veći pobjeđuje).

## Zašto je to važno

Box model upravlja stvarnom veličinom elemenata i kako se razmaču.

Znanje da zadana shema dodaje padding/border na `width` (i zašto je `border-box` gotovo univerzalno rješenje) sprječava najčešću zbunjenost u dimenzioniranju rasporeda.