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

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

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

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

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

Синтаксис

margin-inline-end:

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

margin-top: | | auto;

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

Значения

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

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