CSS-свойство margin устанавливает отступы для всех четырех сторон элемента. Это короткое свойство для margin-top, margin-right, margin-bottom, и margin-left.

Значение по умолчанию: 0
Применяется к: Все элементы, кроме тех, которые имеют display table-caption, table, и inline-table. Это также относится к ::first-letter.
Наследование: Нет
Анимирование: Да. Анимируемые свойства
Версия: CSS 1, 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

margin: [ length | percentage | auto ] 1 to 4 values | initial | inherit

Примеры написания кода свойства margin:

/* Применяется ко всем четырём сторонам */
margin: 15px;

/* по вертикали | по горизонтали */
margin: 5% auto;

/* сверху | горизонтально | снизу */
margin: 15px auto 30px; 

/* сверху | справа | снизу | слева */
margin: 5px 15px 0 auto;

/* Глобальные значения */
margin: inherit;
margin: initial;
margin: unset;

Эта сокращенная запись может принимать одно, два, три или четыре значения, разделенных пробелами.

  • Если установлено одно значение, оно распространяется на все 4 стороны.
  • Если заданы два значения, первое значение применяется для верхней и нижней грани, второе значение для правой и левой.
  • Если заданы три значения, первое применяются к верхней, второе к правой и левой, третье к нижней грани.
  • Четыре значения применяются к верхней, правой, нижней, левой стороне в указанном порядке.

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
margin-top Устанавливает верхний внешний отступ элемента.
margin-right Устанавливает правый внешний отступ элемента.
margin-bottom Устанавливает нижний внешний отступ элемента.
margin-left Устанавливает левый внешний отступ элемента.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента margin.

Поддержка браузеров

Свойство margin поддерживается во всех основных браузерах.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.