Svojstvo margin

Svojstvo margin postavlja spoljašnje uvođenje elementa. Vrednost svojstva su bilo koje jedinice za veličine ili ključna reč auto, koja omogućava pregledaču da samostalno izračuna uvođenje elementa. Podrazumevano, svaki pregledač može dodavati elementima različita uvođenja.

Svojstvo je skraćenica za svojstva margin-top, margin-right, margin-bottom, margin-left.

Sintaksa

selektor {
	margin: vrednost;
}

Broj vrednosti

Svojstvo margin prima 1, 2, 3 ili 4 vrednosti, navedene razmakom:

Količina	Opis
`1`	Jedna vrednost zadaje uvođenje sa svih strana elementa.
`2`	Prva vrednost zadaje uvođenje odozgo i odozdo, a druga - sa desne i sa leve strane.
`3`	Prva vrednost zadaje uvođenje odozgo, druga - sa desne i sa leve strane, a treća - odozdo.
`4`	Prva vrednost zadaje uvođenje odozgo, druga - sa desne strane, treća - odozdo, a četvrta - sa leve strane.

Primer

Sada ćemo imati blok bez uvođenja:

<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

A sada ćemo bloku zadati uvođenje od 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

Zadaćemo bloku uvođenje od 10px odozgo i odozdo i 20px - sa leve i sa desne strane:

<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

Zadaćemo bloku uvođenje od 5px odozgo, 15px sa desne strane, 25px odozdo i 35px sa leve strane:

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

Pogledajte takođe

svojstvo padding,
koje zadaje unutrašnje uvođenje