Свойство margin задает расстояние от элемента до соседних элементов.
Margin «очищает» территорию вокруг элемента (за пределами рамки (border)). Margin (внешний отступ) не имеет фонового цвета (точнее фон прозрачный).
Верхний, правый, нижний и левый внешние отступы можно изменить независимо друг от друга, используя соответствующие свойства. Для изменения внешних отступов с разных сторон можно использовать краткую запись.
Возможные значения
Значение | Описание |
---|---|
auto | Внешний отступ определяется браузером. |
Размер | Фиксированный внешний отступ (пиксели, пункты, сантиметры и т.п.) |
% | Внешний отступ в % от родительского элемента |
Заметка: вы можете использовать отрицательные значения внешнего отступа, для перекрывания элементов.
Внешние отступы — разные значения для разных сторон
В CSS вы можете назначить разные значения внешних отступов для различных сторон элемента:
margin-top:100px; margin-bottom:100px; margin-right:50px;
margin-left:50px;
Margin — краткая запись
В целях уменьшения размера кода, вы можете свести все внешние отступы к одной записи.
Краткой записью свойств внешних отступов является свойство «margin»:
margin:100px 50px;
Свойство margin может иметь от одного до четырех значений.
- margin:25px 50px 75px 100px;
- верхний отступ равен 25px
- правый отступ равен 50px
- нижний отступ равен 75px
- левый отступ равен 100px
- margin:25px 50px 75px;
- верхний отступ равен 25px
- правый и левый отступы равны 50px
- нижний отступ равен 75px
- margin:25px 50px;
- верхний и нижний отступы равны 25px
- правый и левый отступы равны 50px
- margin:25px;
Все свойства margin — справка CSS
Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).
Свойство | Описание | Значения | CSS |
---|---|---|---|
margin | Краткая запись всех внешних отступов | margin-top margin-right margin-bottom
margin-left |
1 |
margin-bottom | Нижний внешний отступ | auto размер-отступа % |
1 |
margin-left | Левый внешний отступ | auto размер-отступа % |
1 |
margin-right | Правый внешний отступ | auto размер-отступа % |
1 |
margin-top | Верхний внешний отступ | auto размер-отступа % |
1 |