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

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

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

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

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

Но измените элемент writing-modeна что-то подобное, vertical-rlи начальный край повернется в вертикальном направлении, действуя больше как leftсвойство.

Синтаксис

inset-block-start: ;

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

Значения

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

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