Свойство margin устанавливает отступ снаружи элемента. Свойства margin-top, margin-right, margin-bottom, margin-left устанавливают отступы сверху, справа, снизу, слева соответственно. Свойство margin является свойством-сокращением - позволяет одновременно установить отступ с различных сторон элемента.

Синтаксис

селектор {
	margin: CSS единицы | проценты | auto | inherit;
}

Значения для margin

Свойства margin-top, margin-right, margin-bottom, margin-left принимают только один параметр.

Значение Описание
CSS единицы Устанавливает отступ в заданных единицах.
Проценты Отступ вычисляется в зависимости от ширины родительского элемента.
auto Позволяет выравнять по центру (по горизонтали) блочный элемент.
Выравнивание работает только по горизонтали (флексбоксы будут поддерживать и по вертикали) и только для блочных элементов (при этом у них обязательно должна быть задана ширина!).
Для строчно-блочных элементов следует использовать text-align в значении center.
inherit Наследует значение родителя.

По умолчанию каждый браузер может добавлять элементам различные отступы (в разных браузерах могут быть разные отступы!). Используйте reset.css, чтобы обнулить их (или сделать одинаковые).

Количество параметров

Свойство-сокращение margin принимает 1, 2, 3 или 4 параметра.

Значение Описание
Одно число margin: 10px; Задает отступ со всех сторон элемента.
Два числа margin: 10px 20px; Первое число задает отступ сверху и снизу, а второе - справа и слева.
Три числа margin: 10px 20px 30px; Первое число задает отступ сверху, а второе - справа и слева, третье - снизу.
4 числа margin: 10px 20px 30px 40px; 10px сверху, 20px справа, 30px снизу, 40px слева. Таким образом первое число задает верх, и затем следует идти по часовой стрелке: верх, право, низ, лево.

Примеры

Пример

Сейчас у нас будет блок без отступов:

<div id="elem"></div>
#elem {
	border: 1px solid red;
	margin: 0;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

А сейчас блоку зададим отступ в 10px:

#elem {
	border: 1px solid red;
	margin: 10px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

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

#elem {
	border: 1px solid red;
	margin: 10px 20px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

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

#elem {
	border: 1px solid red;
	margin: 5px 15px 25px 35px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

Зададим блоку отступ в 5px сверху, 15px справа, 25px снизу и 35px слева с помощью отдельных свойств:

#elem {
	border: 1px solid red;
	margin-top: 5px;
	margin-right: 15px;
	margin-bottom: 25px; 
	margin-left: 35px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

В данном примере контейнеру правый и левый margin установлены в значение auto - контейнер станет по центру окна браузера. Обратите внимание на то, что при подобном центрировании контейнер обязательно должен иметь ширину (в px или % - неважно):

#elem {
	border: 1px solid red;
	margin: 20px auto;
	width: 300px;
	height: 100px;
}

Посмотреть пример.