Eigenschap margin

De eigenschap margin stelt de externe marge van een element in. De waarde van de eigenschap kan elke maateenheid voor afmetingen zijn of de sleutelwoordwaarde auto, die de browser laat beslissen hoe de marge van het element wordt berekend. Standaard kan elke browser verschillende marges toevoegen aan elementen.

De eigenschap is een verkorte vorm voor de eigenschappen margin-top, margin-right, margin-bottom, margin-left.

Syntaxis

selector {
	margin: waarde;
}

Aantal waarden

De eigenschap margin accepteert 1, 2, 3 of 4 waarden, gescheiden door een spatie:

Aantal	Beschrijving
`1`	Eén waarde geeft een marge aan alle kanten van het element.
`2`	De eerste waarde geeft de marge boven en onder, en de tweede - rechts en links.
`3`	De eerste waarde geeft de marge boven, de tweede - rechts en links, en de derde - onder.
`4`	De eerste waarde geeft de marge boven, de tweede - rechts, de derde - onder, en de vierde - links.

Voorbeeld

Nu hebben we een blok zonder marges:

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

Voorbeeld

Laten we het blok nu een marge van 10px geven:

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

Voorbeeld

Laten we het blok een marge van 10px boven en onder en 20px - links en rechts geven:

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

Voorbeeld

Laten we het blok een marge van 5px boven, 15px rechts, 25px onder en 35px links geven:

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

Zie ook

de eigenschap padding,
die de interne opvulling instelt