Il box model: content, padding, border, margin e box-sizing

In CSS ogni elemento è una scatola rettangolare, composta da quattro «strati» concentrici. Capire come sono fatti e come si calcolano le loro dimensioni è la base per gestire spaziature e layout senza sorprese. Il box model può essere associato a una foto incorniciata appesa al muro. La foto è il contenuto; il passe-partout bianco intorno è il padding; la cornice è il bordo; lo spazio di muro vuoto fino ad altre foto appese al muro è il margine.

I quattro strati, dall'interno verso l'esterno

• content: il contenuto vero e proprio (testo, immagine, video). Le sue dimensioni si impostano con width e height. È lo spazio occupato dalla foto.
• padding: lo spazio interno tra il contenuto e il bordo; fa parte dello sfondo dell'elemento. È il passe-partout dentro la cornice.
• border: il bordo che avvolge contenuto e padding. È la cornice.
• margin: lo spazio esterno trasparente che separa la scatola da quelle vicine. È il muro vuoto tra una cornice e l'altra.

.scatola {
  width: 200px;        /* content  */
  padding: 20px;       /* interno  */
  border: 4px solid;   /* bordo    */
  margin: 16px;        /* esterno  */
}

Fonte: MDN Web Docs: Introduction to the CSS box model

box-sizing: come si calcolano le dimensioni

Attenzione a non cascare nella facile trappola. Per impostazione predefinita (content-box), la width vale solo per il contenuto: padding e bordo si aggiungono, quindi la scatola diventa più grande di quanto avevi scritto.

Una strada può essere impostare la proprietà box-sizing: border-box; così larghezza e altezza includono padding e bordo. In pratica, «la larghezza che imposti è quella che ottieni»: il contenuto si restringe da solo per fare spazio.

Per questo motivo, spesso, si attiva su tutta la pagina, utilizzando il selettore universale *:

*, *::before, *::after {
  box-sizing: border-box;
}

Fonte: MDN Web Docs: proprietà «box-sizing» (developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)

Il collasso dei margini (margin collapse)

Quando due margini verticali (margin-top e margin-bottom) si incontrano, non si sommano: si «fondono» in uno solo, e prevale il valore più grande tra i due.

Esempio: il paragrafo A ha margin-bottom: 30px e il paragrafo B ha margin-top: 20px. Lo spazio tra loro non è 50px, ma 30px (il maggiore).

Da ricordare: succede solo in verticale (i margini orizzontali non collassano mai), riguarda gli elementi di blocco nel flusso normale, e non avviene dentro contenitori che hanno la proprietà display impostata su flex o grid.

Fonte: MDN Web Docs: Mastering margin collapsing

background-clip: fin dove arriva lo sfondo

Per impostazione predefinita lo sfondo (colore o immagine) arriva fino al bordo esterno, passando anche sotto il bordo. Con background-clip decidi fin dove estenderlo:

• border-box (default): lo sfondo arriva fino al bordo esterno (anche sotto il border).
• padding-box: si ferma al bordo interno: sotto il padding, ma non sotto il border.
• content-box: solo dietro il contenuto.
• text: lo sfondo viene «ritagliato» sulla forma del testo (il trucco per il testo con gradiente).

.badge {
  background: gold;
  border: 3px dashed brown;
  /* lo sfondo non traspare tra i trattini del bordo */
  background-clip: padding-box;
}

Fonte: MDN Web Docs: proprietà «background-clip»

Conclusione

Il box model serve a comprendere come gestire il posizionamento, le dimensione di un elemento HTML tramite CSS: content, padding, border e margin sono i quattro strati di ogni elemento. Tieni a mente i tre accorgimenti che fanno risparmiare ore di debug: attiva box-sizing: border-box per dimensioni prevedibili, non stupirti se due margini verticali «si fondono» (il collasso), e usa background-clip per controllare fin dove arriva lo sfondo.

Riferimenti ufficiali

• MDN: Introduction to the CSS box model: developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model
• MDN: box-sizing: developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
• MDN: Mastering margin collapsing: developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing
• MDN: background-clip: developer.mozilla.org/en-US/docs/Web/CSS/background-clip
• W3C: CSS Box Model Module Level 3: w3.org/TR/css-box-3/