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

margin-inline-startСвойство в CSS определяет объем пространства вдоль внешней начальной кромки элемента в направлении инлайн. Он включен в спецификацию уровня 1 логических свойств CSS, которая в настоящее время находится в рабочем проекте.

.element ( margin-inline-start: 25%; writing-mode: vertical-lr; )

Начальная кромка во внутреннем направлении определяется элементами writing-mode, directionи text-orientation. Таким образом, при использовании margin-inline-startв горизонтальном контексте слева направо он действует так же, как margin-leftначальный край элемента - это левая сторона.

Но если мы изменим writing-modeзначение, скажем, на вертикальное, элемент повернется по часовой стрелке, поместив начальный край вверх. В результате margin-inline-startведет себя так же, как margin-top. Как правило, начальная кромка определяется направлением потока. Вот что мы имеем в виду, когда говорим о «логических» свойствах.

Синтаксис

margin-inline-start:

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

margin-top: | | auto;

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

Значения

margin-block-start принимает значение одной длины или ключевого слова.

/* Length values */ margin-inline-start: 20px; margin-inline-start: 2rem; margin-inline-start: 25%; /* Keyword values */ margin-inline-start: auto; /* Global values */ margin-inline-start: inherit; margin-inline-start: initial; margin-inline-start: unset;