Care este diferența dintre box-sizing: content-box și border-box?

Diferența dintre box-sizing: content-box și box-sizing: border-box constă în modul în care browserul calculează dimensiunile totale ale elementului:

• content-box (valoare implicită): lățimea și înălțimea specifică doar conținutul. La aceste dimensiuni se adaugă marginile interne (padding) și marginile (border), mărind dimensiunea finală a elementului.

• border-box: lățimea și înălțimea includ conținutul, padding-ul și border-ul. Cu alte cuvinte, padding-ul și border-ul "încap" în dimensiunile stabilite.

Exemplu:

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

• Cu content-box, lățimea totală va fi: 200 + 102 + 52 = 230px.
• Cu border-box, lățimea totală va rămâne 200px, iar conținutul se va micșora pentru a face loc padding-ului și border-ului.

Utilizarea border-box este adesea mai convenabilă pentru layout, deoarece dimensiunile elementelor nu "se umflă" din cauza padding-ului și border-ului.