Свойство 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;
}

Пример

Зададим блоку отступ в 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,
которое задает внутренний отступ