Маржа-блок - CSS-хитрощі | Альманах CSS 2025

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

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

.element ( margin-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Якщо writing-modeвстановлено значення horizontal-lr, margin-blockвластивість буде діяти так само, як встановлення margin-topта margin-bottom. Цікавим аспектом цієї властивості є те, що це одна з логічних властивостей, яка не має однозначної карти з нелогічною властивістю. Немає старішої властивості, яка встановлює обидва (і лише) поля напряму блоку.

Але змініть елемент writing-modeна щось на зразок, vertical-lrі "нижній" край повернеться у вертикальному напрямку, діючи більше як властивості margin-leftі margin-right.

Синтаксис

margin-block: (1,2)

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

margin-top: | | auto;

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

Цінності

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

/* Length values */ margin-block: 20px 40px; margin-block: 2rem 4rem; margin-block: 25% 15%; margin-block: 20px; /* a single value sets both values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: unset;