Маржа-блок - CSS-хитрости

margin-block- это сокращенное свойство в CSS, которое устанавливает элемент margin-block-startи margin-block-endзначения, оба из которых являются логическими свойствами. Это создает пространство вокруг элемента в направлении инлайн, который определяется элемент writing-mode, directionи text-orientation.

Это свойство является частью спецификации CSS Logical Properties and Values Level 1, которая в настоящее время находится в статусе Editor's Draft. Это означает, что определение и информация о нем могут измениться с настоящего момента и до официальной рекомендации.

.element ( margin-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Если writing-modeустановлено значение horizontal-lr, margin-blockсвойство будет действовать так же, как и настройка margin-topи margin-bottom. Одним из интересных аспектов этого свойства является то, что это одно из логических свойств, которое не имеет однозначного сопоставления с нелогическим свойством. Нет более старого свойства, которое устанавливает оба (и только) поля направления блока.

Но изменить элемент writing-modeк чему - то , как vertical-lrи «нижнему» краю поворачиваются в вертикальном направлении, действуя больше как margin-leftи margin-rightсвойство.

Синтаксис

margin-block: (1,2)

Довольно странно видеть, что синтаксис одного свойства ссылается на синтаксис другого свойства CSS прямо в документации, но это действительно то, что есть. По сути, он пытается сказать, что свойство принимает те же значения margin-top(до двух раз), которые соответствуют этому синтаксису:

margin-top: | | auto;

Первоначальный значение: 0
Применимо ко всем элементам, кроме внутренних элементов таблицы, базовых контейнеров ruby и контейнеров аннотаций ruby
Унаследовано: нет
Проценты: по соответствующему физическому объекту
Вычисленное значение: то же, что и соответствующие margin-*свойства
Тип анимации: по типу вычисляемого значения

Значения

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

/* Length values */ margin-block: 20px 40px; margin-block: 2rem 4rem; margin-block: 25% 15%; margin-block: 20px; /* a single value sets both values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: unset;