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

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

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

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

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

Синтаксис

margin-block-start:

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

margin-top: | | auto;

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

Цінності

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

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