Inset-block-start - CSS-хитрощі | Альманах CSS 2025

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

Властивість є частиною специфікації логічних властивостей та значень CSS рівня 1, яка наразі перебуває у статусі Чернетки редактора. Це означає, що визначення та інформація про нього можуть змінюватися від сьогодні до офіційної рекомендації.

.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;