Gestire i Margini di un DIV-Box

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

.. Salva la Pagina.

<-->

♣ © All Rights Reserved - www.isolajava.com ♣