Margin-i omadus

Omadus margin määrab elemendi välise väljapaneku. Omaduse väärtusteks võivad olla suvalised mõõtühikud või võtmeomadus auto, mis laseb brauseril iseseisvalt arvutada elemendi väljapanekut. Vaikimisi võib iga brauser elementidele lisada erinevaid väljapanekuid.

Omadus on lühend omaduste margin-top, margin-right, margin-bottom, margin-left jaoks.

Süntaks

valija {
	margin: väärtus;
}

Väärtuste arv

Omadus margin võtab vastu 1, 2, 3 või 4 väärtust, loetletud tühikuga eraldatuna:

Arv	Kirjeldus
`1`	Üks väärtus määrab väljapaneku elemendi kõikidelt külgedelt.
`2`	Esimene väärtus määrab väljapaneku ülevalt ja alt, teine - paremalt ja vasakult.
`3`	Esimene väärtus määrab väljapaneku ülevalt, teine - paremalt ja vasakult, kolmas - alt.
`4`	Esimene väärtus määrab väljapaneku ülevalt, teine - paremalt, kolmas - alt, neljas - vasakult.

Näide

Praegu on meil plokk ilma väljapanekuta:

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

Näide

Ja nüüd määrame plokile väljapaneku 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;
}

Näide

Määrame plokile väljapaneku 10px ülevalt ja alt ning 20px - vasakult ja paremalt:

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

Näide

Määrame plokile väljapaneku 5px ülevalt, 15px paremalt, 25px alt ja 35px vasakult:

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

Vaata ka

omadus padding,
mis määrab sisemise väljapaneku