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.