Kuo skiriasi box-sizing: content-box ir border-box?

Skirtumas tarp box-sizing: content-box ir box-sizing: border-box slypi tame, kaip naršyklė apskaičiuoja bendrus elemento matmenis:

• content-box (numatytoji reikšmė): plotis ir aukštis nurodo tik turinį. Prie šių matmenų pridedami vidiniai tarpai (padding) ir rėmeliai (border), padidindami galutinį elemento dydį.

• border-box: plotis ir aukštis apima turinį, padding ir border. Kitaip tariant, padding ir border "įsiterpia" į nustatytus matmenis.

Pavyzdys:

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

• Su content-box bendras plotis bus: 200 + 102 + 52 = 230px.
• Su border-box bendras plotis liks 200px, o turinys sumažės, kad tilptų padding ir border.

Naudojant border-box dažnai yra patogiau, nes elementų matmenys "neplėšiasi" dėl padding ir border.