Ce este modelul de cutie în CSS?

În CSS, modelul de cutie descrie o zonă dreptunghiulară generată pentru fiecare element și utilizată pentru calcularea dimensiunilor și poziției sale. Este format din patru părți:

• Caseta de conținut: Zona în care este afișat conținutul elementului (text, imagini etc.). Dimensiunea sa este determinată de proprietățile width și height.
• Caseta de padding: Spațiul dintre marginea conținutului și marginea elementului. Dimensiunea este determinată de proprietatea padding. Culoarea de fundal și imaginea elementului se extind în această zonă.
• Caseta de border: Marginea elementului care înconjoară caseta de padding. Dimensiunea este determinată de proprietățile border.
• Caseta de margin: Spațiul din jurul marginii elementului, separându-l de alte elemente. Dimensiunea este determinată de proprietatea margin. Această zonă este întotdeauna complet transparentă.

Dimensiunea elementului implicit se calculează după cum urmează:

Lățime = width + padding-left + padding-right + border-left-width + border-right-width
Înălțime = height + padding-top + padding-bottom + border-top-width + border-bottom-width

Proprietatea box-sizing permite modificarea acestui model:

• content-box (implicit): Dimensiunile width și height se referă doar la caseta de conținut.
• border-box: Dimensiunile width și height includ padding și border.

.element-default {
  width: 100px; /* Lățimea casetei de conținut = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Lățimea reală a elementului: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Lățimea reală a elementului = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Lățimea casetei de conținut: 100 - 10 - 10 - 5 - 5 = 70px */
}