Aký je rozdiel medzi box-sizing: content-box a border-box?

Rozdiel medzi box-sizing: content-box a box-sizing: border-box spočíva v spôsobe, akým prehliadač vypočíta celkové rozmery prvku:

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

• border-box: šírka a výška zahŕňajú obsah, padding a border. Inými slovami, padding a border "sa zmestia" do stanovených rozmerov.

Príklad:

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

• Pri content-box bude celková šírka: 200 + 102 + 52 = 230px.
• Pri border-box zostane celková šírka 200px a obsah sa zmenší, aby sa zmestil padding a border.

Použitie border-box je často pohodlnejšie pre rozloženie, pretože rozmery prvkov sa "nenafukujú" kvôli paddingu a borderu.