Margini

Vediamo qualche esempio d'uso dei margini. Iniziamo dall'uso delle proprietà singole.

margin-bottom

Il margine inferiore di questo è settato a 70 pixel.

Codice:

#div1 {
background: Silver;
width: 300px;
margin-bottom: 70px;
}

Questo div sarà a 70 pixel dal precedente.

margin-left

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;
}


margin-left in percentuale

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%;
}


margin-top

#div4: semplice punto di riferimento.

Questo div sarà a 50 pixel dal precedente.

Codice:

#div5 {
background: Teal;
width: 300px;
margin-top: 50px;
}


margin-right

#div6

Il margine destro è di 50px.

Codice:

#div7 {
background: silver;
width: 600px;
margin-right: 50px;
}


margin

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;
}


margin: auto

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;
}