Nello script precedente abbiamo visto come il Box Model di CSS contempli nel calcolo delle dimensioni complessive di un elemento, oltre alla larghezza e all'altezza del contenuto (width e height) anche la distanza dai bordi (padding) e lo spessore degli stessi (border-width).
In alcuni casi questo comportamento può rendere complesso il corretto dimensionamento degli elementi, come ad esempio nella costruzione di layout "liquidi" a colonne (elementi con dimensioni espresse in percentuale e affiancati mediante floating).
Impostando la proprietà "box-sizing" a "border-box" possiamo però indicare al browser di includere nel calcolo di width e height anche padding e bordi; questa modalità è anche nota come "IE Box Model" in quanto usata da Internet Explorer in modalità quirks.
In pratica possiamo dunque controllare il Box Model di un elemento attraverso il CSS stesso nel seguente modo:

• con box-sizing: content-box l'altezza e la larghezza specificate per un elemento (e i corrispondenti valori massimi e minimi) sono applicati al contenuto; i bordi e la spaziatura dai bordi vengono aggiunti esternamente al contenuto; questo è il comportamento predefinito di CSS2.1;
• con box-sizing: border-box l'altezza e la larghezza specificate per un elemento determinano la dimensione dello stesso fino ai bordi; la grandezza effettiva del contenuto dell'elemento è dunque data dalle dimensioni (width e height) impostate ma sottraendo bordi e padding.