Маржа встроенная - CSS-хитрости

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

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

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

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

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

Синтаксис

margin-inline: (1,2)

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

margin-top: | | auto;

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

Значения

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

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