box-sizing: content-box vs border-box — e perché border-box è quasi sempre la scelta giusta

Nella lezione precedente abbiamo esplorato il box model. Ora vediamo un comportamento storico del CSS che spesso sorprende chi inizia.

Il Problema Matematico: content-box

Di default, il browser calcola le dimensioni di una scatola usando un modello chiamato content-box. In questo modello, se assegni width: 300px a un elemento, stai impostando solo la larghezza dell’area del contenuto interno.

Se in seguito decidi di aggiungere del padding e un border, il browser espanderà la scatola verso l’esterno, sommandoli alla larghezza originaria.

Guarda questo esempio:

.card {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

Quanto sarà larga fisicamente la .card sullo schermo?

• 300px (Contenuto)
• + 20px (Padding Sinistro) + 20px (Padding Destro)
• + 5px (Bordo Sinistro) + 5px (Bordo Destro)
• Totale reale: 350px!

Questo significa che se vuoi una scatola larga esattamente 300px, dovresti fare i calcoli a mente e impostare width: 250px. E se in futuro volessi aumentare il padding a 30px? Dovresti ricalcolare e cambiare la width a 230px. È un calcolo scomodo, soprattutto nei layout flessibili a percentuali.

La Soluzione: border-box

Per risolvere questo problema, il CSS ha introdotto la proprietà box-sizing: border-box;.

Quando applichi border-box, dici al browser: “Quando scrivo width: 300px, intendo che la larghezza TOTALE, inclusi padding e border, deve essere 300px”.

Il browser farà i calcoli al posto tuo, spingendo il padding e il bordo verso l’interno e sottraendo spazio al contenuto.

.card {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

Quanto è larga adesso la .card? Esattamente 300px. Niente matematica aggiuntiva!

Una convenzione molto diffusa

Questa soluzione è così comoda che oggi molti sviluppatori e framework CSS (come Bootstrap o Tailwind) applicano border-box a tutti gli elementi della pagina di default.

Come farlo? Si usa il selettore universale (*), spesso come prima riga del file CSS principale:

/* Resetta il box model per TUTTI gli elementi */
*, *::before, *::after {
  box-sizing: border-box;
}

Inserire questa regola all’inizio del CSS rende le dimensioni degli elementi più prevedibili e riduce molti errori di layout.