CSS: margin. Внешний отступ.

Свойство CSS margin устанавливает внешний отступ элемента, то есть расстояние от его границы (свойство border) до внутренней границы его родительского элемента. Если нет родительского элементы, то отступом будет расстояние до края окна браузера. Следует помнить, что у края окна браузера есть свои отступы.

При помощи свойства margin можно задать величину отступов для всех сторон элемента или установить ее только для выбранных сторон.

Давайте рассмотрим пример. Вот его CSS-код:

.div-example-1
{
	width:  90%;		// ширина внешнего блока
	margin: 0 auto;		// внешний отступ
	border: 1px solid #000;
}
.p-example-1
{
	width:  50px;		// ширина внутреннего блока
	height:  50px;		// высота внутреннего блока
	margin: 10px;		// внешний отступ внутреннего блока
	border: 1px solid #000;
	background-color: #F00;
}

Вот как он работает:

Теперь давайте рассмотрим, как он работает.

Класс .div-example-1 создаёт контейнер, внутри которого мы будем играть с абзацем с классом .p-example-1, устанавливая ему разные значения. У класса .div-example-1 есть CSS правило margin: 0 auto;. Мы видим два значения: 0 и auto. Первое значение устанавливает величину отступа для верхней и нижней грани, второе значение устанавливает размер отступа по бокам. Первое значение равно 0 и оно указывает, что верхнего и нижнего отступа нет, ноль он и есть ноль. Значение auto автоматически центрирует блок, делая правый и левый отступ одинаковыми.

Класс .p-example-1 создан в форме красного квадрата при помощи правил ширина: width: 50px и высота: height: 50px, размер стороны квадрата 50 пикселей.

Мы видим расстояние между красным квадратом и чёрной границей внешнего блока по 10 пикселей везде, кроме правой стороны. Это и есть внешней отступ, заданный в правиле margin: 10px; класса .p-example-1.

Давайте изменим ширину красного блока на 100%.

.div-example-2
{
	width:  90%;
	margin: 0 auto;
	border: 1px solid #000;
}
.p-example-2
{
	width:  100%;	// меняем только это правило
	height: 50px;
	margin: 10px;
	border: 1px solid #F00;
	background-color: #F00;
}

Вот как работает этот код:

Мы видим, что красный блок вышел за границу блока-родителя в правой стороне. Почему так произошло? Дело в том, что когда мы установили ширину красного блока равную 100%, то он занял весь родительский блок. После этого к этим 100% мы добавили ещё 10 пикселей отступа. В результате красный блок смещается, так как его суммарная ширина превышает ширину родителя. Подробнее про это можно прочитать в статье: Блочная модель CSS.

Давайте попробуем решить эту проблему. Для этого достаточно просто удалить свойство width: 100%; в классе .p-example-3:

.div-example-3
{
	width:  90%;
	margin: 0 auto;
	border: 1px solid #000;
}
.p-example-3
{
	height: 50px;
	margin: 10px;
	border: 1px solid #F00;
	background-color: #F00;
}

Вот результат:

Всё работает нормально. Браузер по умолчанию растянет блок на всю ширину блока-родителя. И эта ширина не является аналогом правила width: 100%;. Это нужно понимать.

Некоторые итоги

Итак:

  • свойство margin может иметь одно значение, тогда оно устанавливается для отступов со всех сторон блока;
  • свойство marginможет иметь два значения: первое указывает величину верхнего и нижнего отступа, а второе - правого и левого.
  • для свойства margin можно установить значение auto, которое автоматически разместит блок.

Продолжим

Cвойство margin также может иметь четыре значения. В этом случае первое значение соответствует величине верхнего отступа, и далее по часовой стрелке: правый, нижний, левый отступы.

Давайте приведём пример такого CSS правила:

.div-example-4
{
	display: inline-block;
	border: 1px solid #000;
}
.p-example-4
{
	width:  50px;
	height: 50px;
	margin: 10px 20px 30px 70px;
	background-color: #F00;
}

Вот результат:

Обратите внимание, для класса .div-example-4 прописано правило display: inline-block;, то есть я сдела его строчно-блочным элементом. Я это сделал, чтобы его чёрная граница по ширине была равной его содержимому. А содержит он в себе только абзац с классом .p-example-4. У этого абзаца есть свойство margin: 10px 20px 30px 70px;, и в работе примера видно, что все внешние отступы у блока разные.

Также обратите внимание, что фоновый цвет, указанный в правиле background-color: #F00;, не распространяется на внешний отступ CSS margin. Внешние отсупы всегда прозрачные и эти поля приобретают цвет блока родителя.

Следующий момент, который нужно знать про свойство CSS margin — это то, что у него может быть также и три свойства. В этом случае первое значение задает размер отступа от верхнего края, второе — одновременно для левого и правого краёв, а третье — задаёт отступ для нижнего края.

Давайте подведём итоги, представим в форме таблицы все варианты значений свойства CSS margin:

Табл. CSS margin: количество значений
Число значений Результат
1 Значение используется для установки всех отступов элемента.
2 Первое значение устанавливает отступ от верхнего и нижнего края, второе — от боковых.
3 Первое значение задает отступ от верхнего края, второе — для боковых краёв, а третье — от нижнего края.
4 Устанавливается отступ для каждого края отдельно по часовой стрелке начиная с верхнего.

Также нужно помнить про возможность использования конструкции margin: 0 auto для выравнивания блока по центру.

Ну и нужно помнить, что область внешних отступов не заливается фоновым цветом (свойство background-color).

Значения для свойства CSS margin можно задавать не только в различных диницах измерения CSS, но и в процентах.

Установка внешних отступов CSS margin для каждой стороны

Кроме вышеописанного свойства CSS margin, для задания величины каждого отступа существуют ещё четыре свойства:

  • margin-top — устанавливает границу для верхнего отступа;
  • margin-right — устанавливает границу для правого отступа;
  • margin-bottom — устанавливает границу для нижнего отступа;
  • margin-left — устанавливает границу для левого отступа.

Возникает закономерный вопрос: зачем нужны эти свойства, если есть свойство CSS margin? Бывают случаи, когда без них никак. Например, мы работаем в панели администрирования чужого сайта, у нас нет доступа к редактированию файла CSS, а нам нужно увеличить только верхний отступ тега h2, а остальные не править. Мы добавляем этому тегу атрибут style="margin-top: 20px". Так мы меняем только верхний отступ, остальные остаются без изменений, чего нельзя сделать при помощи style="margin: 20px".

Итак, мы изучили внешние отступы CSS — свойство margin. Для понимания, что такое блочная модель CSS, далее нужно выучить границы элементов — CSS border и внутренние отступы — CSS padding.