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

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

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

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

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

Синтаксис

margin-inline-end:

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

margin-top: | | auto;

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

Цінності

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

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