Ce este modelul de cutie în CSS?

Modelul de cutie CSS descriează modul în care elementele sunt afișate pe pagină ca blocuri dreptunghiulare. Acesta este format din patru zone sau straturi suprapuse, începând cu conținutul:

1. Conținut: Zona în care se află conținutul real al elementului (text, imagini etc.). Dimensiunea sa este determinată de proprietățile width și height.

2. Padding (Spațiu interior): Zona transparentă dintre conținut și marginea elementului. Se setează cu proprietățile padding-top, padding-right, padding-bottom, padding-left sau cu abrevierea padding.

3. Border (Margine): Linia care înconjoară Padding-ul și Conținutul. Stilul, grosimea și culoarea sa sunt definite de proprietățile border-width, border-style, border-color sau prin abreviaturi precum border.

4. Margin (Margine exterioară): Zona transparentă din jurul marginii elementului, care îl separă de alte elemente. Se setează cu proprietățile margin-top, margin-right, margin-bottom, margin-left sau cu abrevierea margin. Marginile blocurilor adiacente pot colapsa.

Comportamentul standard, descris de box-sizing: content-box (implicit), determină că proprietățile width și height se referă doar la conținut (Content). Padding și Border se adaugă la această dimensiune, mărind dimensiunea totală a elementului.

Prin utilizarea box-sizing: border-box, proprietățile width și height includ Conținutul, Padding-ul și Border-ul. Marginul (margin) se adaugă întotdeauna la dimensiunea totală a elementului, indiferent de box-sizing.

Exemplu:

div {
  width: 100px; /* Lățimea conținutului (pentru content-box) sau a întregului element (pentru border-box) */
  height: 50px; /* Înălțimea conținutului (pentru content-box) sau a întregului element (pentru border-box) */
  padding: 10px; /* Spațiu interior */
  border: 2px solid black; /* Margine */
  margin: 15px; /* Margine exterioară */
}

În funcție de valoarea box-sizing, dimensiunile reale ale elementului vor fi diferite.

• box-sizing: content-box: Lățimea reală = 100px (Conținut) + 10px (Padding stânga) + 10px (Padding dreapta) + 2px (Border stânga) + 2px (Border dreapta) = 124px. Înălțimea reală = 50px (Conținut) + 10px (Padding superior) + 10px (Padding inferior) + 2px (Border superior) + 2px (Border inferior) = 74px.
• box-sizing: border-box: Lățimea reală = 100px (Conținut + Padding + Border). Înălțimea reală = 50px (Conținut + Padding + Border).

Marginea exterioară margin: 15px se adaugă în jurul acestei dimensiuni totale.