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

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

.element ( margin-inline-start: 25%; writing-mode: vertical-lr; )

Початковий край у прямому напрямку визначається елементами writing-mode, directionі text-orientation. Отже, при використанні margin-inline-startв горизонтальному контексті зліва направо, він діє так само, margin-leftяк початковий край елемента - ліва сторона.

Але якщо ми змінимо writing-modeна, скажімо, вертикальний, елемент обертається за годинниковою стрілкою, розміщуючи початковий край до вершини. В результаті margin-inline-startповодиться так само margin-top. В основному, початковий край знаходиться відносно напрямку, в якому він тече. Це те, що ми маємо на увазі, говорячи про “логічні” властивості.

Синтаксис

margin-inline-start:

Дивно бачити, як синтаксис одного властивості посилається на синтаксис іншого властивості CSS прямо в документації, але це насправді саме це. В основному він намагається сказати, що властивість приймає ті самі значення, margin-topщо й після цього синтаксису:

margin-top: | | auto;

Початкове значення: 0
Застосовується до: усіх елементів, крім внутрішніх елементів таблиці, базових контейнерів ruby та контейнерів ruby-анотацій
Успадковано: ні
Відсотки: як для відповідної фізичної властивості
Обчислене значення: те саме, що відповідні margin-*властивості
Тип анімації: за типом обчислюваного значення

Цінності

margin-block-start приймає одну довжину або значення ключового слова.

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