CSS свойства margin-inline-end и margin-inline-start

Разрабатываемая новая спецификация CSS Logical Properties Level 1 specification включает несколько новых свойств. Одними из таких являются CSS свойства margin-inline-end и margin-inline-start вошли в спецификацию CSS Logical Properties Level 1 specification, которая в настоящее время находится на этапе разработки.

CSS margin-inline-end

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

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

CSS margin-inline-start

При применении margin-inline-start в горизонтальном контексте слева направо он действует так же, как и margin-left, поскольку начальный край элемента — это левая сторона.

Вдобавок, при перемене направления текста на вертикальный, элемент повернётся по часовой стрелке, а его начальный край окажется вверху. CSS margin-inline-start ведёт себя так же, как margin-top.

Синтаксис margin-inline-end и margin-inline-start

Согласитесь, довольно странно видеть, как синтаксис одного CSS свойства ссылается на синтаксис другого прямо в документации, но это действительно так. Margin-inline-end и margin-inline-start имеют одинаковый синтаксис:

Значение по умолчанию: 0;

Применяются: ко всем элементам, кроме внутренних элементов таблицы, базовых Ruby-контейнеров и Ruby-аннотаций;

Наследуемые: нет;

Проценты: зависит от модели макета;

Вычисленное значение: аналогичны margin-;

Тип анимации: по типу вычисленного значения;

Единицы измерения

Стоит отметить, что CSS margin-inline-end принимает значение в любых единицах измерений.

Кроссбраузерность margin-inline-end и margin-inline-start

Несмотря на то, что эта спецификация еще не утверждена официально, все современные браузеры поддерживают свойства margin-inline-end и margin-inline-start. Internet Explorer, конечно, не входит в этот список.