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

margin-inline-startИмовина у ЦСС дефинише количину простора дуж спољашњег почетне ивице елемента у правцу инлине. Уврштен је у спецификацију ЦСС логичких својстава нивоа 1, која је тренутно у радној верзији.

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

Почетна ивица у правцу линије одређена је елементима writing-mode, directionи text-orientation. Дакле, када се користи margin-inline-startу хоризонталном контексту слева надесно, делује исто као margin-leftда је почетна ивица елемента лева страна.

Али ако променимо writing-modeу, рецимо, вертикално, елемент се ротира у смеру казаљке на сату, постављајући почетну ивицу према врху. Као резултат, margin-inline-startпонаша се баш као margin-top. У основи, почетна ивица је у односу на смер кретања. На то мислимо када говоримо о „логичким“ својствима.

Синтакса

margin-inline-start:

Некако је чудно видети синтаксу једног својства која се односи на синтаксу другог ЦСС својства управо у документацији, али то је заиста оно што јесте. Оно што у основи покушава да каже је да својство прихвата исте вредности као margin-topшто следи ова синтакса:

margin-top: | | auto;

Почетна вредност: 0
Односи се на: све елементе, осим унутрашњих елемената табеле, рубин основних контејнера и рубин напомена контејнера
Наследио: не
Проценти: као за одговарајуће физичко својство
Израчуната вредност: исто као и одговарајућа margin-*својства
Тип анимације: према израчунатој врсти вредности

Вредности

margin-block-start прихвата једну дужину или вредност кључне речи.

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