margin
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS свойство margin
определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top
, margin-right
, margin-bottom
и margin-left
.
Интерактивный пример
Составные свойства
Данное свойство является сокращением для следующих CSS свойств:
Синтаксис
/* Применяется ко всем четырём сторонам */
margin: 1em;
margin: -3px;
/* по вертикали | по горизонтали */
margin: 5% auto;
/* сверху | горизонтально | снизу */
margin: 1em auto 2em;
/* сверху | справа | снизу | слева */
margin: 2px 1em 0 auto;
/* Глобальные значения */
margin: inherit;
margin: initial;
margin: unset;
Свойство margin
может быть задано с использованием одного, двух, трёх или четырёх значений. Каждое значение имеет тип <length>
, <percentage>
или является ключевым словом auto
. Каждое значение может быть положительным, отрицательным или равным нулю.
- Когда определено одно значение, такое значение определено для всех четырёх сторон.
- Когда определены два значения, то первое значение определяет внешний отступ для верхней и нижней стороны, а второе значение определяет отступ для левой и правой стороны.
- Когда определены три значение, то первое значение определяет внешний отступ для верхней стороны, второе значение определяет внешний отступ для левой и правой стороны, а третье значение определяет отступ для нижней стороны.
- Когда определены четыре значения, они определяют внешние отступы для верхней стороны, справа, снизу и слева в рассмотренном порядке (по часовой стрелке).
Значения
<length>
-
Размер отступа как фиксированное значение.
<percentage>
-
Размер отступа в процентах относительно ширины родительского блока.
auto
-
Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.
Формальное определение
Начальное значение | как и у каждого из подсвойств этого свойства:
|
---|---|
Применяется к | все элементы, кроме элементов с табличным типом display , отличным от table-caption , table и inline-table . Это также применяется к ::first-letter . |
Наследуется | нет |
Проценты | ссылается на ширину содержащего блока |
Обработка значения | как и у каждого из подсвойств этого свойства:
|
Animation type | длина |
Формальный синтаксис
margin =
<'margin-top'>{1,4}
<margin-top> =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )
<anchor-element> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Примеры
Простой пример
HTML
<div class="center">Этот элемент отцентрирован.</div>
<div class="outside">
Этот элемент расположен за пределами своего контейнера.
</div>
CSS
.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
Больше примеров
margin: 5%;
/* все стороны: отступ 5% */
margin: 10px;
/* все стороны: отступ 10px */
margin: 1.6em 20px;
/* верх и низ: отступ 1.6em */
/* право и лево: отступ 20px */
margin: 10px 3% 1em;
/* верх: отступ 10px */
/* право и лево: отступ 3% */
/* низ: отступ 1em */
margin: 10px 3px 30px 5px;
/* верх: отступ 10px */
/* право: отступ 3px */
/* низ: отступ 30px */
/* лево: отступ 5px */
margin: 2em auto;
/* верх и низ: отступ 2em */
/* блок отцентрирован горизонтально */
margin: auto;
/* верх и низ: отступ 0 */
/* блок отцентрирован горизонтально */
Примечание
Горизонтальное выравнивание
Чтобы центрировать что-то горизонтально в современных браузерах, вы можете использовать display: flex; justify-content: center;
.
Однако в старых браузерах, таких как IE8-9, которые не поддерживают технологию Flexible Box, они недоступны. Чтобы центрировать элемент внутри своего родителя, используйте margin: 0 auto;
.
Схлопывание отступов
Иногда внешние отступы для верхней и нижней сторон схлопываются в один отступ, который равен наибольшему из двух отступов. Смотрите Схлопывание внешних отступов для получения большей информации.
Спецификации
Specification |
---|
CSS Box Model Module Level 3 # margin |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Введение в базовую блочную модель CSS
- Схлопывание отступов
margin-top
,margin-right
,margin-bottom
иmargin-left
- Логические свойства:
margin-block-start
,margin-block-end
,margin-inline-start
иmargin-inline-end
. А так же сокращенные варианты:margin-block
иmargin-inline