Proprietà margin

La proprietà margin imposta il margine esterno dell'elemento. I valori della proprietà possono essere qualsiasi unità di misura o la parola chiave auto, che consente al browser di calcolare autonomamente il margine dell'elemento. Per impostazione predefinita, ogni browser può aggiungere margini diversi agli elementi.

La proprietà è una scorciatoia per le proprietà margin-top, margin-right, margin-bottom, margin-left.

Sintassi

selettore {
	margin: valore;
}

Numero di valori

La proprietà margin accetta 1, 2, 3 o 4 valori, elencati separati da spazi:

Quantità	Descrizione
`1`	Un valore imposta il margine su tutti i lati dell'elemento.
`2`	Il primo valore imposta il margine superiore e inferiore, il secondo - destro e sinistro.
`3`	Il primo valore imposta il margine superiore, il secondo - destro e sinistro, il terzo - inferiore.
`4`	Il primo valore imposta il margine superiore, il secondo - destro, il terzo - inferiore, il quarto - sinistro.

Esempio

Ora avremo un blocco senza margini:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 0;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Esempio

Ora impostiamo un margine di 10px per il blocco:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Esempio

Impostiamo un margine di 10px in alto e in basso e 20px - a sinistra e a destra:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px 20px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Esempio

Impostiamo un margine di 5px in alto, 15px a destra, 25px in basso e 35px a sinistra:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 5px 15px 25px 35px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

Vedi anche

la proprietà padding,
che imposta il margine interno