Vlastnosť margin

Vlastnosť margin nastavuje vonkajší odstup elementu. Hodnotou vlastnosti sú akékoľvek jednotky pre veľkosti alebo kľúčová vlastnosť auto, ktorá poskytuje prehliadaču možnosť autonómne vypočítať odstup elementu. Predvolene môže každý prehliadač pridávať elementom rôzne odsadenia.

Vlastnosť je skratkou pre vlastnosti margin-top, margin-right, margin-bottom, margin-left.

Syntax

selektor {
	margin: hodnota;
}

Počet hodnôt

Vlastnosť margin prijíma 1, 2, 3 alebo 4 hodnoty, vypísané cez medzeru:

Počet	Popis
`1`	Jedna hodnota nastaví odstup zo všetkých strán elementu.
`2`	Prvá hodnota nastaví odstup zhora a zdola, a druhá - sprava a zľava.
`3`	Prvá hodnota nastaví odstup zhora, druhá - sprava a zľava, a tretia - zdola.
`4`	Prvá hodnota nastaví odstup zhora, druhá - sprava, tretia - zdola, a štvrtá - zľava.

Príklad

Teraz budeme mať blok bez odstupov:

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

Príklad

A teraz bloku nastavíme odstup 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;
}

Príklad

Nastavíme bloku odstup 10px zhora a zdola a 20px - zľava a sprava:

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

Príklad

Nastavíme bloku odstup 5px zhora, 15px sprava, 25px zdola a 35px zľava:

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

Pozrite tiež

vlastnosť padding,
ktorá nastavuje vnútorný odstup