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

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

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

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

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

Синтаксис

margin-block-end:

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

margin-top: | | auto;

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

Цінності

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

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