Cum influențează proprietatea box-sizing dimensiunea elementului?

Proprietatea CSS box-sizing determină modul în care sunt calculate dimensiunile unui element — dacă includ sau nu marginile interne (padding) și marginile (border).

• Valoarea content-box (implicită): lățimea și înălțimea elementului definesc doar conținutul. Marginile interne și marginile se adaugă acestor dimensiuni, mărind dimensiunea totală a elementului.

• Valoarea border-box: lățimea și înălțimea includ conținutul, marginile interne și marginile. Asta înseamnă că, dacă setezi o lățime de 100px, conținutul va fi redus pentru a ține cont de padding și border, astfel încât dimensiunea totală să rămână 100px.

Exemplu:

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

În acest caz, elementul .box va avea o lățime totală de 200px, inclusiv padding și border. Dacă ar fi content-box, lățimea totală ar fi 200 + 210 + 25 = 230px.

Utilizarea border-box simplifică adesea layout-ul, deoarece dimensiunile elementelor nu "se răspândesc" din cauza padding-ului și border-ului.