Vlastnost margin

Vlastnost margin nastavuje vnější okraj elementu. Hodnotou vlastnosti jsou jakékoliv jednotky pro velikosti nebo klíčová vlastnost auto, která poskytuje prohlížeči možnost samostatně vypočítat okraj elementu. Ve výchozím nastavení může každý prohlížeč přidávat elementům různé okraje.

Vlastnost je zkratkou pro vlastnosti margin-top, margin-right, margin-bottom, margin-left.

Syntaxe

selektor {
	margin: hodnota;
}

Počet hodnot

Vlastnost margin přijímá 1, 2, 3 nebo 4 hodnoty, vyjmenované mezerou:

Počet	Popis
`1`	Jedna hodnota nastaví okraj ze všech stran elementu.
`2`	První hodnota nastaví okraj shora a zdola, a druhá - vpravo a vlevo.
`3`	První hodnota nastaví okraj shora, druhá - vpravo a vlevo, a třetí - zdola.
`4`	První hodnota nastaví okraj shora, druhá - vpravo, třetí - zdola, a čtvrtá - vlevo.

Příklad

Nyní budeme mít blok bez okrajů:

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

Příklad

A nyní bloku nastavíme okraj 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;
}

Příklad

Nastavíme bloku okraj 10px shora a zdola a 20px - vlevo a vpravo:

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

Příklad

Nastavíme bloku okraj 5px shora, 15px vpravo, 25px zdola a 35px vlevo:

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

Viz také

vlastnost padding,
která nastavuje vnitřní okraj