Egenskapen margin

Egenskapen margin setter den eksterne margen til et element. Verdien for egenskapen kan være enhver enhet for størrelser eller nøkkelegenskapen auto, som lar nettleseren beregne margen til elementet automatisk. Som standard kan hver nettleser legge til forskjellige marger for elementer.

Egenskapen er en forkortelse for egenskapene margin-top, margin-right, margin-bottom, margin-left.

Syntaks

velger {
	margin: verdi;
}

Antall verdier

Egenskapen margin aksepterer 1, 2, 3 eller 4 verdier, opplistet med mellomrom:

Antall	Beskrivelse
`1`	Én verdi setter marg på alle sider av elementet.
`2`	Første verdi setter marg på toppen og bunnen, og den andre - til høyre og venstre.
`3`	Første verdi setter marg på toppen, andre - til høyre og venstre, og den tredje - på bunnen.
`4`	Første verdi setter marg på toppen, andre - til høyre, tredje - på bunnen, og den fjerde - til venstre.

Eksempel

Nå skal vi ha en blokk uten marger:

<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 nå setter vi en marg på 10px for blokken:

<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

La oss sette en marg på 10px på toppen og bunnen og 20px - til venstre og høyre:

<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

La oss sette en marg på 5px på toppen, 15px til høyre, 25px på bunnen 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å

egenskapen padding,
som setter indre marg