Перейти к содержанию

margin

Свойство margin устанавливает величину отступа от каждого края элемента.

Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от левого края элемента

Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора <body> равное нулю.

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

Демо

Блоки

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
/* 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. Зависимость от числа значений
Число значенийРезультат
1Отступы будут установлены одновременно от каждого края элемента.
2Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого.
3Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

Величину отступов можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto

Указывает, что размер отступов будет автоматически рассчитан браузером.

Значение по-умолчанию:

1
margin: 0;

Применяется ко всем элементам

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>.

Комментарии