margin-block-start

Определение и применение

Свойство margin-block-start задаёт внешний отступ в начале блочной оси. Остальные стороны сохраняют свои значения.

Оси block и inline обозначают направление расположения блоков и направление строки. start — начало (англ. start), end — конец (англ. end) выбранной оси.

Подробнее об областях блока и направлении письма — в уроке «Блочная и строчная модель. Часть 1: области блока и отступы».

Попробуйте значения margin-block-start

Сравните пространство снаружи рамок трёх блоков. Выберите значение, затем переключите направление письма: физическая сторона изменится по выбранной оси.

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

margin-block-start: 0

HTML и CSS примера
HTML
<div class="stage">
  <div class="container" dir="ltr" style="writing-mode: horizontal-tb">
    <div class="demo-target"><span>1</span></div>
    <div class="demo-target"><span>2</span></div>
    <div class="demo-target"><span>3</span></div>
  </div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 400px;
  color: #172c3d;
  font: 16px/1.5 system-ui;
  background: #fff;
  padding: 6px;
}
.container {
  display: flow-root;
  width: 100%;
  height: 210px;
  background: #fff0bf;
  outline: 1px dashed #64748b;
}
.demo-target {
  padding: 4px;
  border: 1px solid #245a85;
  background: #b9d7eb;
  margin-block-start: 0;
}
.demo-target span {
  display: block;
  background: #fff;
}

Поддержка браузерами

Спецификация: CSS logical

Поддерживается во всех основных браузерах с 2020 года.

Показать браузеры
Совместимостьcss.properties.margin-block-start
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
margin-block-start✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2
anchor-size✓132✓132✓147✓117✓26✓132✓147✓87✓26✓29.0✓132✓26
auto✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓69✓12.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Функция anchor-size() требует отдельной проверки поддержки и связанного якорного элемента. Обычные отступы не требуют якорей.

CSS синтаксис:

CSS
margin-block-start: [ auto | <length-percentage> | <anchor-size()> ];

/* Глобальные значения */
margin-block-start: initial | inherit | unset | revert | revert-layer;

<length-percentage> — длина или процент, <anchor-size()> — функция расчёта по размеру якоря. | разделяет варианты, квадратные скобки группируют их. Свойство принимает одно значение, отрицательные отступы допустимы.

JavaScript синтаксис:

JavaScript
element.style.marginBlockStart = "24px";

Начальное значение свойства

0.

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

Значения margin-block-start
Значение Описание
<length> Длина, например 16px или 1rem. Допустимы отрицательные значения: они сближают элементы и могут привести к перекрытию.
<percentage> Процент рассчитывается по правилам соответствующего физического отступа. При обычном горизонтальном письме содержащего блока 10% — десятая часть его ширины, а не ширины самого элемента.
auto Автоматический отступ. В обычном потоке auto по блочной оси не центрирует блок. Во Flexbox и Grid результат зависит от свободного места и раскладки.
anchor-size() Расчёт по размерам якорного элемента. Требует связанного якоря и отдельной проверки поддержки браузером.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства margin-block-start устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Как выбирается физическая сторона

При writing-mode: horizontal-tb отступ находится сверху. При writing-mode: vertical-rl — справа. Смена только direction с ltr на rtl не меняет начало и конец блочной оси.

Логическое и физическое свойства, которые попали на одну сторону, конкурируют по обычным правилам каскада. Позднее сокращение может перезаписать ранее заданную составляющую.

Чем отличается от margin-top, margin, margin-block

  • margin-top привязаны к физическим сторонам элемента. margin-block-start выбирает стороны по направлению письма: при writing-mode: vertical-rl блочная ось идёт справа налево. Это позволяет использовать один стиль в разных режимах письма.
  • margin задаёт отступы всех четырёх сторон. margin-block-start затрагивает только одну логическую сторону, сохраняя остальные.
  • margin-block управляет обеими сторонами оси, а margin-block-end — противоположной стороной. Используйте margin-block-start, когда нужно изменить только начало оси.

Особенности применения

Внешний отступ находится за рамкой и не закрашивается фоном. В обычном потоке соседние отступы по блочной оси могут схлопываться; внутри Flexbox и Grid такого схлопывания нет. auto по блочной оси обычного блока не создаёт вертикальное центрирование.

Спецификация

CSS Logical Properties and Values — margin-block-start.

Наследуется

Нет.

Анимируемое

Длины и проценты интерполируются по вычисленному значению. Переход с auto не даёт плавной интерполяции длины.

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

Внешний отступ при смене направления письма

Измените margin-block-start у трёх блоков и сравните результат. В HTML замените dir="ltr" на dir="rtl", затем задайте контейнеру writing-mode: vertical-rl. Для блочной оси смена только ltr на rtl не меняет стороны.

base.css
CSS
body {
    margin: 16px;
    background: white;
}
* {
    box-sizing: border-box;
}
.stage {
    width: 100%;
    max-width: 400px;
    color: #172c3d;
    font: 16px/1.5 system-ui;
    background: #fff;
    padding: 6px;
}
.container {
    display: flow-root;
    width: 100%;
    height: 210px;
    background: #fff0bf;
    outline: 1px dashed #64748b;
}
.demo-target {
    padding: 4px;
    border: 1px solid #245a85;
    background: #b9d7eb;
}
.demo-target span {
    display: block;
    background: #fff;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Внешний отступ при смене направления письма</title>
  </head>
  <body>
    <div class="stage">
      <div class="container" dir="ltr">
        <div class="demo-target"><span>1</span></div>
        <div class="demo-target"><span>2</span></div>
        <div class="demo-target"><span>3</span></div>
      </div>
    </div>
  </body>
</html>
style.css
CSS
.container {
    writing-mode: horizontal-tb;
}
.demo-target {
    margin-block-start: 24px;
}