Маржа-рядок - CSS-хитрощі

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

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

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

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

Але змініть елементи writing-modeна щось на зразок, vertical-lrі “вбудовані” краї обертаються у вертикальному напрямку, діючи більше як властивості margin-topі margin-bottom.

Синтаксис

margin-inline: (1,2)

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

margin-top: | | auto;

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

Цінності

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

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