Lastnost margin

Lastnost margin določa zunanji odmik elementa. Vrednost lastnosti so poljubne enote za velikosti ali ključna lastnost auto, ki brskalniku omogoča samostojno izračunavanje odmika elementa. Privzeto lahko vsak brskalnik elementom doda različne odmike.

Lastnost je okrajšava za lastnosti margin-top, margin-right, margin-bottom, margin-left.

Sintaksa

selektor {
	margin: vrednost;
}

Število vrednosti

Lastnost margin sprejme 1, 2, 3 ali 4 vrednosti, naštete s presledkom:

Število	Opis
`1`	Ena vrednost določa odmik z vseh strani elementa.
`2`	Prva vrednost določa odmik od zgoraj in spodaj, druga pa - od desne in leve.
`3`	Prva vrednost določa odmik od zgoraj, druga - od desne in leve, tretja pa - od spodaj.
`4`	Prva vrednost določa odmik od zgoraj, druga - od desne, tretja - od spodaj, četrta pa - od leve.

Primer

Zdaj bomo imeli blok brez odmikov:

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

Primer

Zdaj pa določimo bloku odmik 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;
}

Primer

Določimo bloku odmik 10px od zgoraj in spodaj ter 20px - od leve in desne:

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

Primer

Določimo bloku odmik 5px od zgoraj, 15px od desne, 25px od spodaj in 35px od leve:

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

Glejte tudi

lastnost padding,
ki določa notranji odmik