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

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

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

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

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

Синтакса

margin-block-start:

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

margin-top: | | auto;

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

Вредности

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

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