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

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