Ce face box-sizing: border-box?

Question

Accepted Answer

`box-sizing` controlează **ce măsoară de fapt proprietățile `width` și `height`**. Valoarea implicită (`content-box`) măsoară doar conținutul; `border-box` face ca acestea să includă padding-ul și bordura.

## Problema cu valoarea implicită (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! */
```

Cu `content-box`, padding-ul și bordura sunt **adăugate deasupra** `width`-ului, deci elementul ajunge mai larg decât numărul pe care l-ai stabilit. Aceasta rupe layout-urile: o casetă `width: 50%` cu padding depășește 50%.

## Soluția: 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. */
```

Cu `border-box`, `width` este **final** - padding-ul și bordura sunt scăzute din interior. Numărul pe care îl stabilești este dimensiunea pe care o primești, ceea ce este mult mai intuitiv.

## Resetarea universală

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

Aproape fiecare stylesheet modern, framework și reset aplică aceasta la nivel global. Face dimensionarea previzibilă: `width: 50%` + padding rămâne exact 50% larg, două cutii `width: 50%` stau una lângă alta fără depășiri, etc.

## De ce conteaza

`border-box` elimină cea mai comună sursă de probleme în matematica layout-ului — necesitatea de a aduna mental padding-ul și bordura la fiecare width.

Stabilirea ei la nivel global este considerată o bună practică implicită, deoarece "widthul pe care îl stabilesc este widthul pe care îl primesc" este cum te aștepți în mod natural să funcționeze dimensionarea.