Margin-inline - CSS-трикове | CSS алманах 2025

margin-inlineе стенографско свойство в CSS, което задава елемент margin-inline-startи margin-inline-endстойности, и двете от които са логически свойства. Той създава пространство около елемент в посока на инлайн, която се определя от елемента writing-mode, directionи text-orientation.

Свойството е част от спецификацията CSS Logical Properties and Values Level 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
Прилага се за: всички елементи с изключение на вътрешните елементи на таблицата, контейнерите за рубинна основа и контейнерите за руби анотиране
Наследен: не
Проценти: както за съответното физическо свойство
Изчислена стойност: същата като съответните 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;