HTML.it - Guida CSS di base - Gestire i margini

Proprietà singola in px

Questo box ha il margine sinistro impostato con un valore in pixel.

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

Proprietà singola espressa in percentuale

Questo box ha il margine sinistro impostato con un valore in percentuale. La percentuale è calcolato rispetto alla width dell'elemento contenitore.

.box-2 {
 width: 400px;
 height: 200px;
 padding: 10px;
 border: 1px solid #002c53;
 margin-left: 10%;
 background: #568ec0;
}

Usare auto per centrare orizzontalmente

Questo box ha il margine sinistro e quello destro impostato su auto. Avendo una larghezza specificata, sarà centrato orizzontalmente rispetto al box contenitore.

.box-3 {
 width: 400px;
 height: 200px;
 padding: 10px;
 border: 1px solid #002c53;
 margin-left: auto;
 margin-right: auto;
 background: #568ec0;
}

Uso della proprietà margin con 4 valori

Su questo box abbiamo usato la proprietà abbreviata margin con 4 valori.

.box-4 {
 width: 400px;
 height: 200px;
 padding: 10px;
 border: 1px solid #002c53;
 margin: 60px 40px 50px 65px;
 background: #568ec0;
}

Uso della proprietà margin con 2 valori

Su questo box abbiamo usato la proprietà abbreviata margin con 2 valori. Il box avrà 60px di margine in alto e in basso; 40px a destra e sinistra.

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

Uso della proprietà margin con un solo valore

Su questo box abbiamo usato la proprietà abbreviata margin con un solo valore. Il box avrà 60px di margine su tutti i lati.

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