Kaj počne box-sizing: border-box?

Question

IT Interview Practice · Accepted Answer

`box-sizing` nadzira **kaj lastnosti `width` in `height` dejansko merijo**. Privzeto (`content-box`) meri samo vsebino; `border-box` jih naredi, da vključujeta opolnomočenje in rob.

## Problem s privzetim (content-box)

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

Z `content-box` se polnilo in rob **dodata** na `width`, zato je element na koncu širši od števila, ki ste ga nastavili. To pokvari postavitve: škatla `width: 50%` s polnilom preplavi svojih 50%.

## Rešitev: 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. */
```

Z `border-box` je `width` **končna** prikazana širina — polnilo in rob se odštejejo od notranjosti. Število, ki ga nastavite, je velikost, ki je dobite, kar je veliko bolj intuitivno.

## Splošni reset

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

Skoraj vsak sodoben slog, ogrodje in reset to uporabi globalno. To naredi dimenzioniranje napovedljivo: `width: 50%` + polnilo ostane natanko 50% široko, dve škatli `width: 50%` sedita druga ob drugi brez prelivanja itd.

## Zakaj je to pomembno

`border-box` odpravi največji vir glav s postavitvijo — potrebo, da mentalno dodate polnilo in rob vsakemu `width`.

Njegova nastavitev globalno velja za najboljšo prakso, ker je »širina, ki sem jo nastavil, je širina, ki je dobim« pričakovanje, kako bi naravno delalo dimenzioniranje.

Problem s privzetim (content-box)

Rešitev: border-box

Splošni reset

Zakaj je to pomembno

Povezana vprašanja