Край-блок-конец - CSS-хитрости

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

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

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

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

Синтаксис

margin-block-end:

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

margin-top: | | auto;

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

Значения

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

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