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

На margin-block-endсобственост в CSS определя размера на пространството по външния край край на елемент в посоката на блок. Той е включен в спецификацията CSS Logical Properties Level 1, която в момента е в Работен проект.

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

В завършващ ръб по посока на блок се определя от години на елементите writing-mode, directionи text-orientation. Така че, когато се използва margin-block-endв хоризонтален контекст отляво надясно, той действа точно margin-bottomкакто началният ръб на елемента е дъното му.

Но ако променим на, writing-modeда речем, вертикално, елементът се завърта, поставяйки крайния ръб вдясно. В резултат на това се margin-block-endдържи точно като margin-right. По принцип началният ръб е спрямо посоката, в която тече. Това имаме предвид, когато говорим за „логически“ свойства.

Синтаксис

margin-block-end:

Странно е да видим как синтаксисът на едно свойство препраща синтаксиса на друго CSS свойство точно в документацията, но това всъщност е това. Това, което основно се опитва да каже, е, че свойството приема същите стойности, както margin-topследва този синтаксис:

margin-top: | | auto;

Начална стойност: 0
Прилага се за: всички елементи с изключение на вътрешните елементи на таблицата, контейнерите за рубинна основа и контейнерите за руби анотиране
Наследен: не
Проценти: както за съответното физическо свойство
Изчислена стойност: същата като съответните margin-*свойства
Тип анимация: по тип изчислена стойност

Стойности

margin-block-end приема единична дължина или стойност на ключова дума.

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