Vediamo qualche esempio d'uso dei margini. Iniziamo dall'uso delle proprietà singole.
Il margine inferiore di questo è settato a 70 pixel.
Codice:
#div1 {
background: Silver;
width: 300px;
margin-bottom: 70px;
}
Questo div sarà separato di 50px sul lato sinistro rispetto all'elemento contenitore. In questo caso sarà il corpo della pagina.
Codice:
#div3 {
background: Silver;
width: 300px;
margin-left: 50px;
}
La percentuale è relativa alla larghezza dell'elemento contenitore. Trattandosi qui di <body>, la distanza dipenderà dalla risoluzione usata e/o dall'ampiezza della finestra del browser.
Questo div sarà separato da una distanza pari al 30% della larghezza dell'elemento contenitore.
Codice:
#div10 {
background: Silver;
width: 300px;
margin-left: 30%;
}
Questo div sarà a 50 pixel dal precedente.
Codice:
#div5 {
background: Teal;
width: 300px;
margin-top: 50px;
}
Il margine destro è di 50px.
Codice:
#div7 {
background: silver;
width: 600px;
margin-right: 50px;
}
Qui usiamo la proprietà a sintassi abbreviata margin.
#div8 con l'uso della proprietà margin
Codice:
#div8 {
background: Teal;
width: 600px;
margin: 20px 50px 20px 30px;
}
Un uso intelligente di margin : auto.
Centriamo #div9 con l'uso della proprietà margin:auto sui lati sinistro e destro. Purtroppo non funziona in Explorer 5 per Windows.
Codice:
#div9 {
background: silver;
width: 600px;
margin: 0px auto;
}