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. Internet Explorer, конечно, не входит в этот список.
