Što radi box-sizing: border-box?

Question

IT Interview Practice · 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.

Zašto je to važno

Rješenje: border-box

Univerzalni reset

Zašto je to važno

Povezana pitanja