Својство 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,
које задаје унутрашњи одступ