Универсальное свойство, которое позволяет устанавливать размер всех отступов элемента за одну декларацию. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента. Свойство margin может принимать от одного до четырех значений.
Например:
- margin: 10px 5px 15px 20px;
- верхний отступ 10px
- правый отступ 5px
- нижний отступ 15px
- левый отступ 20px
- margin: 10px 5px 15px;
- верхний отступ 10px
- правый и левый отступы 5px
- нижний отступ 15px
- margin: 10px 5px;
- верхний и нижний отступы 10px
- правый и левый отступы 5px
- margin: 10px;
- все четыре отступа 10px
Внимание: Допускается использование отрицательных значений.
CSS синтаксис
Возможные значения
| Значение | Описание |
|---|---|
| auto | Браузер автоматически устанавливает размер отступов. |
| размер | Устанавливает размер отступов в единицах CSS - пикселях (px), сантиметрах (cm) и т.д. Значение по умолчанию 0. |
| % | Устанавливает размер отступов в процентах от ширины родительского элемента. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Устанавливаем размер отступов параграфа со всех четырех сторон
p {
margin: 2cm 4cm 3cm 4cm;
}
Схлопывание отступов
У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой.
Рассмотрим следующий пример:
h1 {
margin: 0 0 30px 0;
}
p {
margin: 20px 0 0 0;
}
Исходя из данного примера размер нижнего отступа элемента <h1> установлен в 30px, а размер верхнего отступа элемента <p> - в 20px.
Здавый смысл говорит, что вертикальный отступ между элементами <h1> и <p> должен быть 50px (30px + 20px). Однако из-за эффекта схлопывания в дейстительности это значение будет 30px.
Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Для отступов слева и справа схлопывание никогда не применяется.
Схлопывание не срабатывает:
- для элементов, у которых на стороне схлопывания задано свойство padding.
- для элементов, у которых на стороне схлопывания задана граница;
- на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
- на плавающих элементах (для них свойство float задано как left или right);
- для строчных элементов;
- для элемента <html>.
