Što radi box-sizing: border-box?

Question

Accepted Answer

`box-sizing` kontrolira **što `width` i `height` svojstva zapravo mjere**. Zadana vrijednost (`content-box`) mjeri samo sadržaj; `border-box` ih čini uključenima s ispunom i okrajem.

## Zašto je to važno

```css
.box {
  box-sizing: content-box; /* the default */
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px  ← bigger than you asked for! */
```

S `content-box`, ispuna i okraj se **dodaju na vrh** `width`, tako da element postaje veći nego što je broj koji ste postavili. Ovo kvari rasporede: `width: 50%` kutija s ispunom preliva svojih 50%.

## Rješenje: border-box

```css
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
```

S `border-box`, `width` je **finalna** prikazana širina — ispuna i okraj se oduzimaju sa unutarnje strane. Broj koji postavite je veličina koju dobijate, što je mnogo intuitivnije.

## Univerzalni reset

```css
*, *::before, *::after {
  box-sizing: border-box;
}
```

Skoro svi moderni stilovi, okviri i resetiranja to primjenjuju globalno. To čini dimenzije predvidljivima: `width: 50%` + ispuna ostaje točno 50% široka, dvije `width: 50%` kutije stoje jednu pored druge bez prelijevanja, itd.

## Zašto je to važno

`border-box` uklanja najčešći izvor problema s rasporedima — potrebu da mentalno dodate ispunu i okraj na svaku širinu.

Postavljanje globalnom smatra se najboljom praksom prema zadanoj vrijednosti, jer je "Širina koju postavim je širina koju dobijem" način na koji prirodno očekujete da dimenzije funkcioniraju.