Атрибут CSS margin-block-start

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

margin-block-start свойства определяют начальное внешнее поле направления блока.

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

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

Пример

Пример 1

Установить начальное внешнее поле блока направления:

div {
  margin-block-start: 35px;
}

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

Пример 2

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

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

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

CSS синтаксис

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

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

Значение Описание
auto Значение по умолчанию. Стандартное значение внешнего поля элемента.
length Определить расстояние, единица измерения px, pt, cm и т.д. Допускаются отрицательные значения. См. также:Единицы CSS.
% Определить процентное расстояние относительно размера родительского элемента в направлении строки.
initial Установить это свойство в его значение по умолчанию. См. также initial.
inherit Ингерит из родительского элемента. См. также inherit.

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

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

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

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

Кром Эдж Фаерфокс Сафари Опера
87.0 87.0 41.0 12.1 73.0

Связанные страницы

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

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

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

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

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

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

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

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