CSS: border-box non è margin-box

C'è un comune fraintendimento che riguarda la proprietà CSS box-sizing a proposito del calcolo dei margini.

Il valore border-box fa in modo che il box model comprenda padding e bordi nel valore dichiarato di larghezza e altezza. Quindi padding e bordi non vengono sommati ma compresi nelle dimensioni dichiarate. Quindi:

#box {
	box-sizing: border-box;
	width: 200px;
	padding: 20px;
	border: 1px solid;
}

Nel box model tradizionale la larghezza complessiva del contenitore sarebbe data dalla seguente somma:

20 + 20 + 1 + 1 + 200 = 242

Invece usando box-sizing: border-box la larghezza complessiva resta 200. Questo valore non comprende i margini, quindi il loro valore verrà sempre aggiunto alla larghezza complessiva del box. Quindi:

#box {
	box-sizing: border-box;
	width: 200px;
	padding: 20px;
	border: 1px solid;
	margin-left: 20px;
}

In questo caso la larghezza complessiva è 220, perché si somma il valore del margine sinistro.