Ce este modelul de cutie în CSS?

Modelul de cutie în CSS descrie modul în care se calculează spațiul ocupat de un element pe o pagină web. Acesta include:

• Conținut: Zona pentru conținutul efectiv al elementului (text, imagini).
• Padding (umplere): Spațiul dintre conținut și marginea elementului.
• Border (border): Granița care înconjoară padding-ul și conținutul.
• Margin (margine): Spațiul din jurul marginii elementului, separându-l de alte elemente.

Dimensiunea elementului implicit (în modelul standard box-sizing: content-box) este determinată de suma dimensiunilor conținutului, padding-ului și border-ului. Margin-ul se adaugă la spațiul total ocupat, dar nu influențează dimensiunea efectivă a elementului.

Proprietatea box-sizing: border-box modifică calculul dimensiunii elementului, incluzând padding-ul și border-ul în lățimea și înălțimea totale. În acest caz, dimensiunea elementului este determinată de width/height, iar padding-ul și border-ul "consumă" spațiu în interiorul conținutului.

/* Modelul standard (implicit) */
.element-content-box {
  width: 100px; /* Dimensiunea conținutului */
  padding: 10px;
  border: 5px solid black;
  /* Lățimea totală: 100px (conținut) + 10px (padding stânga) + 10px (padding dreapta) + 5px (border stânga) + 5px (border dreapta) = 130px */
}

/* Modelul border-box */
.element-border-box {
  width: 100px; /* Lățimea totală: conținut + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* Dimensiunea conținutului: 100px - 10px (padding stânga) - 10px (padding dreapta) - 5px (border stânga) - 5px (border dreapta) = 70px */
}

Înțelegerea modelului de cutie este esențială pentru poziționarea și compunerea precisă a elementelor pe pagină.