Marginal-block-start - CSS-tricks

Den margin-block-startegenskap i CSS definierar mängden utrymme längs den yttre utgångskanten av ett element i blockriktningen. Den ingår i CSS Logical Properties nivå 1-specifikationen, som för närvarande finns i Working Draft.

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

Startkanten i blockriktningen bestäms av elementets writing-mode, directionoch text-orientation. Så när den används margin-block-starti ett horisontellt vänster-till-höger-sammanhang fungerar det precis som margin-topelementets startkant är toppen av det.

Men om vi ändrar writing-modetill, säg vertikalt, roteras elementet och placerar startkanten åt vänster. Som ett resultat margin-block-startbeter sig precis som margin-left. I grund och botten är startkanten relativt den riktning den flyter. Det är vad vi menar när vi talar om ”logiska” egenskaper.

Syntax

margin-block-start:

Det är ganska konstigt att se syntaxen för en egenskap som refererar till syntaxen för en annan CSS-egendom i dokumentationen, men det är verkligen vad det är. Vad det egentligen försöker säga är att egenskapen accepterar samma värden som margin-topföljer denna syntax:

margin-top: | | auto;

Ursprungligt värde: 0
Gäller: alla element utom interna bordselement, behållare av rubinbas och anteckningsbehållare
Ärvt: nej
Procentandelar: för motsvarande fysiska egendom
Beräknat värde: samma som motsvarande margin-*egenskaper
Animationstyp: efter beräknad värdetyp

Värden

margin-block-start accepterar en enda längd eller ett nyckelordsvärde

/* 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;