Атрибут CSS margin-block

Определение и использование

margin-block Свойство указывает на отступ края начала и конца блока в направлении блока и является сокращением следующих свойств:

margin-block Значение свойства можно установить несколькими способами:

Если у свойства margin-block два значения:

margin-block: 10px 50px;
  • Внешний отступ края начального края составляет 10px
  • внешние отступы конечной границы равны 50px

Если свойство margins-block имеет одно значение:

margin-block: 10px;
  • Внешние отступы начальной и конечной границ равны 10px

CSS margin-block и margin-inline свойства соответствуют margin-top,margin-bottom,margin-left и margin-right Похож на margin-block, но margin-block и margin-inline Свойство зависит от направления блока и строки.

Обратите внимание:соответствующие свойства CSS writing-mode Определяет направление блока. Это влияет на начальную и конечную позиции блока и margin-block Результат свойства. Для английских страниц, направление блока идет вниз, а направление строки слева направо.

Пример

Пример 1

Установить margins-block по обе стороны от блока.

div {
  margin-block: 35px;
}

Попробуйте сами

Пример 2

Когда у элемента <div> writing-mode Когда значение свойства writing-mode установлено в vertical-rl, начальная позиция элементов в направлении блока перемещается от верха к правому краю, а конечная позиция перемещается от низа к левому краю. Изменение writing-mode также влияет на эффект margins-block:

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block: 10px 50px;
}

Попробуйте сами

Синтаксис CSS

margin-block: auto|length|initial|inherit;

Значение атрибута

Значение Описание
auto Значение по умолчанию. Значение margins-block по умолчанию для элемента.
length

Определить margins-block в единицах px, pt, cm и т.д. Разрешены отрицательные значения.

См.:Единицы CSS.
% Определить процент margins-block по отношению к размеру родительского элемента в направлении строки.
initial Установить это свойство в значение по умолчанию. См. initial.
inherit Преемственность от родительского элемента. См. inherit.

Технические детали

Значение по умолчанию: auto
Инheritability: Нет
Создание анимации: Поддерживается. См.:Свойства анимации.
Версия: CSS3
Синтаксис JavaScript: object.style.marginBlock="50px 20px"

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

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Сafari Опера
87.0 87.0 66.0 14.1 73.0

Соответствующие страницы

См. также:Атрибут CSS margin-block-end

См. также:Атрибут CSS margin-block-start

См. также:Атрибут CSS margin-bottom

См. также:Свойство margin-inline CSS

См. также:Свойство margin-left CSS

См. также:Свойство margin-right CSS

См. также:Свойство margin-top CSS

См. также:Свойство writing-mode в CSS