HTML and CSS Reference
In-Depth Information
<!--il margine è lo stesso su tutti i lati-->
div
{
margin: 5px;
}
<!--il primo valore rappresenta il margine superiore e infe-
riore, il
secondo rappresenta il margine destro e sinistro -->
div
{
margin: 5px 10px;
}
<!--i valori rispechiano rispettivamente il margine superio-
re,
destro, inferiore e sinistro -->
div
{
margin: 5px 10px 6px 8px;
}
Così come il padding, possiamo impostare un margine personalizzato per ogni lato
dell'elemento tramite le proprietà
margin-top
,
margin-left
,
margin-bottom
e
margin-right
, che specificano rispettivamente il margine rispetto al bordo superiore,
sinistro, inferiore e destro.
Ora che abbiamo analizzato le proprietà CSS che influiscono sul dimensionamento di
un elemento, possiamo discutere più in dettaglio come i browser calcolano la dimensione
di un elemento in base a queste proprietà CSS. Questo modello di calcolo viene definito
box model
.
Quando renderizza un elemento (per esempio un
div
), il browser genera internamente un
rettangolo che contiene l'elemento stesso. La dimensione del rettangolo è pari alla dimen-
sione dell'elemento contenuto. Il rettangolo è mostrato nella
figura 5.1
.
