HTML and CSS Reference
In-Depth Information
del precedente rettangolo più il parametro CSS
margin
. La dimensione di questo rettan-
golo rappresenta la dimensione finale dell'elemento. Questo nuovo rettangolo è visibile
nella
figura 5.4
.
Figura 5.4
- Secondo il box model, il quarto rettangolo comprende l'area dei primi tre ret-
tangoli con l'aggiunta del margine esterno.
Ora che abbiamo capito come funziona il box model, facciamo un esempio per mettere in
pratica quanto abbiamo appreso. Prendiamo come esempio il CSS nel prossimo codice.
Esempio 5.5
div
{
width: 300px;
height: 80px;
padding: 5px;
border: solid 1px black;
margin: 10px;
}
Calcolare la dimensione di questo div è estremamente semplice. La larghezza è data
dalla seguente formula:
width + (padding-left + padding-right) +
(border-left-width + border-right-width) + (margin-left +
margin-right)
. Allo stesso modo, la formula per calcolare l'altezza di un elemento è:
height + (padding-top + padding-bottom) + (border-top-width
+ border-bottom-width) + (margin-top + margin-bottom)
.
Il risultato finale è che la larghezza totale dell'elemento è 332 pixel e l'altezza totale è
112 pixel. La
figura 5.5
mostra in maniera visuale la formula.
