Egenskaben margin

Egenskaben margin indstiller den ydre margen for et element. Værdien for egenskaben er enhver enhed for størrelser eller nøgleegenskaben auto, som lader browseren selv beregne margenen for elementet. Som standard kan hver browser tilføje elementer forskellige margener.

Egenskaben er en forkortelse for egenskaberne margin-top, margin-right, margin-bottom, margin-left.

Syntaks

selektor {
	margin: værdi;
}

Antal værdier

Egenskaben margin accepterer 1, 2, 3 eller 4 værdier, opremset med mellemrum:

Antal	Beskrivelse
`1`	Én værdi angiver margen på alle sider af elementet.
`2`	Første værdi angiver margen ovenfor og nedenfor, og den anden - til højre og venstre.
`3`	Første værdi angiver margen ovenfor, anden - til højre og venstre, og tredje - nedenfor.
`4`	Første værdi angiver margen ovenfor, anden - til højre, tredje - nedenfor, og fjerde - til venstre.

Eksempel

Nu har vi en blok uden margener:

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

Eksempel

Og nu giver vi blokken en margen på 10px:

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

Eksempel

Vi giver blokken en margen på 10px ovenfor og nedenfor og 20px - til venstre og højre:

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

Eksempel

Vi giver blokken en margen på 5px ovenfor, 15px til højre, 25px nedenfor og 35px til venstre:

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

Se også

egenskaben padding,
som angiver den indre margen