margin-block

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

Свойство margin-block задаёт внешний отступ перед блоком и после него. Стороны выбираются по направлению письма, поэтому один стиль подходит для текста слева направо, справа налево и вертикальных надписей.

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

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

Переключайте направление письма и значение. Жёлтая область снаружи рамки показывает внешний отступ.

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

margin-block: 0

HTML и CSS примера
HTML
<div class="stage">
  <div class="container" dir="ltr" style="writing-mode: horizontal-tb">
    <div class="demo-target"><span>Начало → конец</span></div>
  </div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.container {
  display: flow-root;
  width: 100%;
  min-height: 175px;
  background: #fff0bf;
  border: 1px dashed #6d5d32;
}
.demo-target {
  width: fit-content;
  background: #b9d7eb;
  outline: 1px solid #245a85;
  margin-block: 0;
}
.demo-target span {
  display: block;
  padding: 6px;
  background: white;
}

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

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

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

Показать браузеры
Совместимостьcss.properties.margin-block
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
margin-block✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5
anchor-size✓132✓132✓147✓117✓26✓132✓147✓87✓26✓29.0✓132✓26
auto✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5

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

Логические отступы широко поддерживаются; функция anchor-size() требует отдельной проверки и не нужна для обычной адаптации к направлению письма.

CSS синтаксис:

CSS
margin-block: [ auto | <length-percentage> | <anchor-size()> ]{1,2};

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

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

JavaScript синтаксис:

JavaScript
element.style.marginBlock = "1rem 2rem";

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

  • margin-block-start — 0.
  • margin-block-end — 0.

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

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

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

margin задаёт отступы сразу со всех четырёх физических сторон: сверху, справа, снизу и слева. margin-block управляет только двумя логическими сторонами — началом и концом блочной оси, вдоль которой располагаются следующие друг за другом блоки. Отступы по другой, строчной оси он не меняет.

При обычном горизонтальном письме разница выглядит так:

CSS
/* По 16px со всех четырёх сторон */
margin: 16px;

/* Сверху и снизу — 16px, справа и слева — 0 */
margin: 16px 0;

/* Сверху и снизу — 16px, справа и слева — без изменений */
margin-block: 16px;

Два значения тоже читаются по-разному: margin: 16px 32px задаёт по 16px сверху и снизу, по 32px справа и слева. У margin-block: 16px 32px первое значение относится к началу блочной оси, второе — к концу: при горизонтальном письме это 16px сверху и 32px снизу, а боковые отступы сохраняются.

Какие преимущества это даёт

  • Можно менять расстояния между блоками, сохраняя боковые отступы. Например, добавить отступы сверху и снизу карточки, у которой уже настроено горизонтальное центрирование.
  • Один стиль подходит для разных режимов письма. При вертикальном письме отступы автоматически окажутся справа и слева — перед блоком и после него. Для margin физические стороны остаются прежними.
  • Из кода понятно назначение отступов. margin-block задаёт расстояние по блочной оси, а margin-inline — по строчной. Каждую пару можно настраивать отдельно.

Например, у обычного блока ограниченной ширины при горизонтальном письме можно сохранить центрирование и отдельно добавить внешние отступы сверху и снизу:

CSS
.card {
  width: 240px;
  margin: 0 auto;
  margin-block: 24px;
}

Если контейнер шире 240px, боковые отступы auto центрируют карточку, а margin-block добавляет по 24px сверху и снизу. Замена последней строки на margin: 24px 0 обнулит боковые отступы, и центрирование пропадёт. Когда нужно задать все четыре отступа сразу, margin остаётся удобным сокращением.

От логической стороны к физической

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

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

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

CSS Logical Properties and Values — margin-block.

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: промежуточные значения рассчитываются плавно. Переход с auto — дискретный.

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

Отступы по направлению блоков

У блока заданы разные отступы: в начале оси меньше, в конце больше. Измените writing-mode на vertical-rl: отступы переместятся вправо и влево. Пустое пространство находится снаружи рамки.

base.css
CSS
body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.frame {
    display: flow-root;
    border: 2px dashed #64748b;
    min-height: 180px;
}
.sample {
    width: fit-content;
    background: #fef3c7;
    border: 2px solid #92400e;
}
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="frame"><div class="sample" dir="ltr">Заметки о прогулке</div></div>
  </body>
</html>
style.css
CSS
.sample {
    writing-mode: horizontal-tb;
    margin-block: 12px 40px;
}