Ako vlastnosť box-sizing ovplyvňuje veľkosť prvku?

Vlastnosť CSS box-sizing určuje, ako sa počítajú rozmery prvku — či zahŕňajú alebo nezahŕňajú vnútorné okraje (padding) a rámčeky (border).

• Hodnota content-box (predvolená): šírka a výška prvku určujú iba obsah. Vnútorné okraje a rámčeky sa k týmto rozmerom pridávajú, čím sa celková veľkosť prvku zväčšuje.

• Hodnota border-box: šírka a výška zahŕňajú obsah, vnútorné okraje a rámčeky. To znamená, že ak nastavíte šírku 100px, obsah sa zmenší s ohľadom na padding a border tak, aby celková veľkosť zostala 100px.

Príklad:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

V tomto prípade bude prvok .box mať celkovú šírku 200px, vrátane paddingu a borderu. Ak by to bolo content-box, celková šírka by bola 200 + 210 + 25 = 230px.

Použitie border-box často zjednodušuje rozloženie, pretože rozmery prvkov sa "nerozpadajú" kvôli paddingu a borderu.