HTML.it - Guida CSS di base - Box model

Calcolo della larghezza

La larghezza effettiva di questo box è di 430px.

5 + 10 + 400 + 10 + 5

.box-1 {
 width: 400px;
 height: 400px;
 padding: 10px;
 border: 5px solid #002c53;
 background: #568ec0;
}

La larghezza effettiva di questo box è di 400px.

L'area del contenuto è di 370px.

.box-2 {
 -moz-box-sizing: border-box; 
 -webkit-box-sizing: border-box; 
 box-sizing: border-box;
 width: 400px;
 height: 400px;
 padding: 10px;
 border: 5px solid #002c53;
 background: #568ec0;
}