Cos'è il modello a scatola in CSS?

Il modello a scatola CSS descrive come gli elementi vengono visualizzati sulla pagina come blocchi rettangolari. È composto da quattro zone o strati sovrapposti, a partire dal contenuto:

1. Contenuto: L'area in cui si trova il contenuto reale dell'elemento (testo, immagini, ecc.). La sua dimensione è determinata dalle proprietà width e height.

2. Padding (Imbottitura): L'area trasparente tra il contenuto e il bordo dell'elemento. È impostata con le proprietà padding-top, padding-right, padding-bottom, padding-left o l'abbreviazione padding.

3. Bordo (Border): La linea che circonda il Padding e il Contenuto. Il suo stile, spessore e colore sono definiti dalle proprietà border-width, border-style, border-color o tramite abbreviazioni come border.

4. Margine (Margin): L'area trasparente intorno al bordo dell'elemento, che lo separa dagli altri elementi. È impostato con le proprietà margin-top, margin-right, margin-bottom, margin-left o l'abbreviazione margin. I margini di blocchi adiacenti possono collassare.

Il comportamento standard, descritto da box-sizing: content-box (predefinito), determina che le proprietà width e height si riferiscono solo al contenuto (Content). Padding e Border vengono aggiunti a questa dimensione, aumentando la dimensione totale dell'elemento.

Utilizzando box-sizing: border-box, le proprietà width e height includono Contenuto, Padding e Border. Il Margine (margin) viene sempre aggiunto alla dimensione totale dell'elemento, indipendentemente da box-sizing.

Esempio:

div {
  width: 100px; /* Larghezza del contenuto (per content-box) o dell'intero elemento (per border-box) */
  height: 50px; /* Altezza del contenuto (per content-box) o dell'intero elemento (per border-box) */
  padding: 10px; /* Imbottitura interna */
  border: 2px solid black; /* Bordo */
  margin: 15px; /* Margine esterno */
}

A seconda del valore di box-sizing, le dimensioni reali dell'elemento saranno diverse.

• box-sizing: content-box: La larghezza reale = 100px (Contenuto) + 10px (Padding sinistra) + 10px (Padding destra) + 2px (Bordo sinistra) + 2px (Bordo destra) = 124px. L'altezza reale = 50px (Contenuto) + 10px (Padding superiore) + 10px (Padding inferiore) + 2px (Bordo superiore) + 2px (Bordo inferiore) = 74px.
• box-sizing: border-box: La larghezza reale = 100px (Contenuto + Padding + Border). L'altezza reale = 50px (Contenuto + Padding + Border).

Il margine esterno margin: 15px viene aggiunto intorno a questa dimensione totale.