Ce este proprietatea box-sizing: border-box și ce rol joacă în CSS?

Proprietatea box-sizing determină modul în care se calculează lățimea și înălțimea totale ale unui element.

box-sizing: content-box (valoarea implicită) — lățimea și înălțimea se referă doar la conținut (content). Padding și border se adaugă la valorile specificate de lățime/înălțime.

box-sizing: border-box — lățimea și înălțimea includ padding și border. Conținutul (content) este comprimat pentru a se încadra în dimensiunile specificate.

Rolul box-sizing: border-box în CSS:

• Simplificarea calculelor: Facilitează calculul dimensiunilor elementelor, mai ales când se utilizează padding și border.
• Previzibilitatea în aspectul layout-ului: Permite stabilirea precisă a dimensiunilor blocurilor, indiferent de padding și border, făcând layout-ul mai previzibil.
• Confort în modelul de cutie: Se potrivește cu înțelesul intuitiv al dimensiunii blocului — marginile sale. Facilitează crearea de grile și componente de dimensiuni fixe.

Exemplu:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Lățimea totală = 100 + 10*2 + 1*2 = 122px */
  /* Înălțimea totală = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Lățimea totală = 100px */
  /* Înălțimea totală = 100px */
  /* Conținutul va ocupa 100 - 10*2 - 1*2 = 78px pe lățime și înălțime */
}