Cos'è il modello a scatola in CSS?

Il modello a scatola in CSS descrive come viene calcolato lo spazio occupato da un elemento su una pagina web. Include:

• Contenuto: L'area per il contenuto effettivo dell'elemento (testo, immagini).
• Padding (padding): Spazio tra il contenuto e il bordo dell'elemento.
• Bordo: Il bordo che circonda padding e contenuto.
• Margine: Spazio intorno al bordo dell'elemento, separandolo dagli altri elementi.

L'altezza e la larghezza di un elemento di default (nel modello standard box-sizing: content-box) sono determinate dalla somma di contenuto, padding e bordo. Il margine si aggiunge allo spazio totale occupato, ma non influisce sulla dimensione dell'elemento stesso.

La proprietà box-sizing: border-box modifica il calcolo della dimensione dell'elemento, includendo padding e bordo nella larghezza e altezza complessive. In questo caso, la dimensione dell'elemento è determinata da width/height, e padding e bordo "consumano" spazio all'interno del contenuto.

/* Modello standard (di default) */
.element-content-box {
  width: 100px; /* Dimensione del contenuto */
  padding: 10px;
  border: 5px solid black;
  /* Larghezza totale: 100px (contenuto) + 10px (padding sinistro) + 10px (padding destro) + 5px (bordo sinistro) + 5px (bordo destro) = 130px */
}

/* Modello border-box */
.element-border-box {
  width: 100px; /* Larghezza totale: contenuto + padding + bordo */
  padding: 10px;
  border: 5px solid black;
  /* Dimensione del contenuto: 100px - 10px (padding sinistro) - 10px (padding destro) - 5px (bordo sinistro) - 5px (bordo destro) = 70px */
}

Capire il modello a scatola è fondamentale per posizionare e comporre gli elementi con precisione sulla pagina.