Вставка-блок-конец - CSS-хитрости

inset-block-end- это логическое свойство CSS, которое устанавливает длину смещения элемента в направлении блока от его конечного края. Это вроде как объявляя , bottomкроме конечной точки определяется элемента direction, text-orientationи writing-mode, так же как и другие логические свойства.

Это свойство является частью спецификации CSS Logical Properties and Values Level 1, которая в настоящее время находится в статусе Editor's Draft. Это означает, что определение и информация о нем могут измениться с настоящего момента и до официальной рекомендации.

.element ( inset-block-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Так, например, если режим записи устанавливается в horizontal-lrв inset-block-endсобственности будет действовать точно так же , как bottomи установить элемент это смещение от нижнего края. Вам даже нужно указать явное значение positionдля того же элемента, чтобы оно вступило в силу, как bottomи другие свойства физического смещения.

Но измените элемент writing-modeна что-то вроде, vertical-lrи «нижний» край повернется в вертикальном направлении, действуя больше как rightсвойство.

Синтаксис

inset-block-end: ;

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

Значения

inset-block-endпринимает значение длины и поддерживает глобальные ключевые слова. Его значение по умолчанию auto.

/* Length values */ inset-block-end: 50px; inset-block-end: 4em; inset-block-end: 3.5rem inset-block-end: 25vh; /* Percentage values */ inset-block-end: 50%; /* Keyword values */ inset-block-end: auto; /* initial value */ /* Global values */ inset-block-end: initial inset-block-end: inherit; inset-block-end: unset;