Свойство margin

Свойство margin задава външен отстъп на елемент. Стойност на свойството са всякакви мерни единици за размери или ключовата стойност auto, която позволява на браузъра самостоятелно да изчислява отстъпа на елемента. По подразбиране всеки браузър може да добавя различни отстъпи към елементи.

Свойството е съкращение за свойствата margin-top, margin-right, margin-bottom, margin-left.

Синтаксис

селектор {
	margin: стойност;
}

Брой стойности

Свойство margin приема 1, 2, 3 или 4 стойности, изброени чрез интервал:

Брой	Описание
`1`	Една стойност задава отстъп от всички страни на елемента.
`2`	Първата стойност задава отстъп отгоре и отдолу, а втората - отдясно и отляво.
`3`	Първата стойност задава отстъп отгоре, втората - отдясно и отляво, а третата - отдолу.
`4`	Първата стойност задава отстъп отгоре, втората - отдясно, третата - отдолу, а четвъртата - отляво.

Пример

Сега ще имаме блок без отстъпи:

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

Пример

А сега на блока задаваме отстъп от 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;
}

Пример

Задаваме на блока отстъп от 10px отгоре и отдолу и 20px - отляво и отдясно:

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

Пример

Задаваме на блока отстъп от 5px отгоре, 15px отдясно, 25px отдолу и 35px отляво:

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

Вижте също

свойство padding,
което задава вътрешен отстъп