Ce este modelul de cutie, din ce este format și care…

Modelul de cutie (CSS Box Model) este o entitate abstractă care descrie modul în care elementele HTML sunt reprezentate pe pagină sub forma unor blocuri dreptunghiulare. El determină dimensiunea și poziționarea conținutului, spațiilor interne, marginilor și marginilor externe ale elementului.

Modelul de cutie este format din următoarele părți:

Conținut: Conținutul elementului (text, imagini etc.). Dimensiunea sa este determinată de proprietățile width și height.
Padding: Spațiul dintre conținutul elementului și marginea sa. Este definit de proprietățile padding-top, padding-right, padding-bottom, padding-left sau de proprietatea abreviată padding.
Border: Granița din jurul padding-ului intern și al conținutului. Este definită de proprietățile border-width, border-style, border-color sau de proprietatea abreviată border.
Margine (Margin): Spațiul dintre marginea elementului și elementele externe. Este definit de proprietățile margin-top, margin-right, margin-bottom, margin-left sau de proprietatea abreviată margin.

Există două tipuri principale de model de cutie, determinate de proprietatea box-sizing:

content-box (valoare implicită): Lățimea și înălțimea elementului, stabilite de proprietățile width și height, se referă doar la zona de conținut. Padding și Border se adaugă acestor dimensiuni, mărind dimensiunea totală a elementului.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Adaugă 20px la dimensiunea totală pe fiecare axă */
  border: 2px solid black; /* Adaugă 4px la dimensiunea totală pe fiecare axă */
  box-sizing: content-box; /* Comportament implicit */
}
/* Dimensiunea totală a elementului va fi de 124px pe 124px */

border-box: Lățimea și înălțimea elementului, stabilite de proprietățile width și height, includ conținutul, padding și border. Padding și Border nu cresc dimensiunea totală a elementului, ci "o comprimă" în zona de conținut.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Inclus în lățimea/înălțimea totală */
  border: 2px solid black; /* Inclus în lățimea/înălțimea totală */
  box-sizing: border-box;
}
/* Dimensiunea totală a elementului va fi de 100px pe 100px */

Se folosește mai frecvent border-box pentru un comportament mai previzibil al dimensiunilor elementelor atunci când se adaugă padding și border. Acest lucru este util, de exemplu, la crearea de layout-uri responsive, unde elementele trebuie să ocupe o anumită lățime procentuală.

Ce este modelul de cutie, din ce este format și care sunt tipurile sale?