margin¶
Свойство margin
устанавливает величину отступа от каждого края элемента.
Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).
Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора <body>
равное нулю.
Свойство margin
позволяет задать величину отступа сразу для всех сторон элемента или определить её только для указанных сторон.
Блоки
Синтаксис¶
/* Apply to all four sides */
margin: 1em;
/* vertical | horizontal */
margin: 5% auto;
/* top | horizontal | bottom */
margin: 1em auto 2em;
/* top | right | bottom | left */
margin: 2px 1em 0 auto;
/* Global values */
margin: inherit;
margin: initial;
margin: unset;
Значения¶
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Число значений | Результат |
---|---|
1 | Отступы будут установлены одновременно от каждого края элемента. |
2 | Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого. |
3 | Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края. |
4 | Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края. |
Величину отступов можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.
auto
- Указывает, что размер отступов будет автоматически рассчитан браузером.
Значение по-умолчанию:
margin: 0;
Применяется ко всем элементам
Спецификации¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>margin</title>
<style>
body {
margin: 0; /* Убираем отступы */
}
.parent {
margin: 20%; /* Отступы вокруг элемента */
background: #e2edc1; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
.child {
border: 3px solid #333391; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
margin: 10px; /* Отступы */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Коллективное бессознательное, как бы это ни казалось
парадоксальным, многопланово продолжает
невротический онтологический статус искусства.
</div>
</div>
</body>
</html>
Примечания¶
У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Для отступов слева и справа схлопывание никогда не применяется.
Схлопывание не срабатывает:
- для элементов, у которых на стороне схлопывания задано свойство
padding
. - для элементов, у которых на стороне схлопывания задана граница;
- на элементах с абсолютным позиционированием, т. е. таких, у которых
position
установлено какabsolute
; - на плавающих элементах (для них свойство
float
задано какleft
илиright
); - для строчных элементов;
- для
<html>
.