CSS стиль margin. Установка отступов с помощью margin
CSS стиль margin задает отступ от каждого края элемента до внутренней границы его родителя.
Если у элемента нет родителя, то отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию также установлены отступы. Чтобы от них избавиться, следует установить для тега <body> CSS-правило margin: 0;. Свойство margin позволяет задать отступ сразу для всех сторон элемента, или только для указанных.
Internet Explorer 7 в режиме совместимости (quirk mode) не поддерживает выравнивание блока по центру с помощью правила margin: 0 auto. Кроме того, в этом браузере имеется ошибка, связанная с удвоением значения левого/правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблему можно решить добавлением плавающему элементу свойства display: inline.
Взаимодействие элементов, имеющих отступы
У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания (отступы не суммируются, а объединяются между собой). Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху, или снизу, при этом прилегающие отступы объединяются в один (больший поглощает меньший). Для отступов слева и справа схлопывание отсутствует.
Схлопывание не срабатывает в следующих случаях:
- для элементов, у которых на стороне схлопывания задано свойство padding;
- для элементов, у которых на стороне схлопывания задана рамка;
- для элементах с абсолютным позиционированием (задано свойство
position: absolute);
- для плавающих элементах (для них свойство float задано как left, или right);
- для строчных элементов;
- для тега html.
Краткая информация по CSS-стилю margin
| Значение по умолчанию | 0 |
|---|
| Наследуется | Нет |
|---|
| Применяется | Ко всем элементам |
|---|
Правила написания свойства margin
margin: [<размер> | auto] {1,4}
Где auto - указывает, что размер отступов будет рассчитан браузером автоматически.
Размер правого отступа можно указывать в пикселях (px), процентах (%), или других допустимых для CSS единицах. Отступ может быть как положительным, так и отрицательным. Можно использовать одно, два, три, или четыре значения, разделяя их пробелом. Зависимость отступов от числа значений следующая:
Объектная модель
Объект.style.margin
Пример применения стиля margin
Проиллюстрируем работу margin на примере. С помощью скрипта изменим margin у нижнего блока и заодно покажем как работывает схлопывание.
Применение свойства margin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля margin</title>
<style>
p {
margin: 10px; /* Отступы */
background: #e7c1dc; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<p>Блок 1</p>
<p id="margin">Блок 2</p>
<script>
document.getElementById("margin").style.margin = "20px 10px";
</script>
</body>
</html>