box-sizing controlla cosa misurano effettivamente le proprietà width e height. Il valore predefinito (content-box) misura solo il contenuto; border-box le rende includere il padding e il bordo.
box-sizing controlla cosa misurano effettivamente le proprietà width e height. Il valore predefinito (content-box) misura solo il contenuto; border-box le rende includere il padding e il bordo.
.box {
box-sizing: content-box; /* the default */
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px ← bigger than you asked for! */
Con content-box, il padding e il bordo sono aggiunti in più rispetto a width, quindi l'elemento finisce per essere più largo del numero che hai impostato. Questo rompe i layout: una casella width: 50% con padding traborda dal suo 50%.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
Con border-box, width è la larghezza finale renderizzata — il padding e il bordo vengono sottratti dall'interno. Il numero che imposti è la dimensione che ottieni, il che è molto più intuitivo.
*, *::before, *::after {
box-sizing: border-box;
}
Quasi ogni foglio di stile moderno, framework e reset applica questo globalmente. Rende il dimensionamento prevedibile: width: 50% + padding rimane esattamente al 50% di larghezza, due caselle width: 50% si siedono una accanto all'altra senza trabordare, ecc.
border-box elimina la fonte più comune di mal di testa nel calcolo dei layout — dover aggiungere mentalmente il padding e il bordo a ogni larghezza.
Impostarlo globalmente è considerato un valore predefinito best-practice, perché "la larghezza che imposto è la larghezza che ottengo" è il modo in cui naturalmente ti aspetti che il dimensionamento funzioni.