Kaj je CSS box model?

Question

Accepted Answer

Vsak element v CSS je pravokoten **box** iz štirih slojev, od znotraj navzven: **content**, **padding**, **border** in **margin**. Razumevanje, kako se kombinirajo, je temelj vseh postavitev.

```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 past: skupna širina

S **privzetim** `box-sizing: content-box` je upodobljena širina *večja* od `width`, ki ga nastavite, ker se padding in border dodajajo na vrh:

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

To preseneti začetnike — nastavite `width: 200px`, vendar zaseda 250px. Popravek, ki ga vsi uporabljajo:

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

## padding vs margin

- **padding** — prostor *znotraj* bordera; je del elementa (klikljiv, sprejema barvo ozadja).
- **margin** — prostor *zunaj* bordera; transparenten, in sosednji navpični margini se **sesedejo** (večji od dveh sosednjih margrov zmaga).

## Zakaj je to pomembno

Box model določa, kako veliki so elementi dejansko in kako se razmaknejo.

Vedenje, da privzeti model doda padding/border k `width` (in zakaj je `border-box` skoraj univerzalna popravka) preprečuje najpogostejšo zmedo pri spreminjanju velikosti postavitve.