Маргин-инлине - ЦСС-трикови

margin-inlineје стенографско својство у ЦСС-у које поставља елемент margin-inline-startи margin-inline-endвредности, а оба су логичка својства. То ствара простор око елемента у правцу линијске, који је одређен елемент је writing-mode, directionи text-orientation.

Својство је део спецификације ЦСС логичких својстава и вредности 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)

Некако је чудно видети синтаксу једног својства која се односи на синтаксу другог ЦСС својства управо у документацији, али то је заиста оно што јесте. Оно што у основи покушава да каже је да својство прихвата исте вредности као 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;