Margin-inline-start - CSS-tricks

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

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

Startkanten i inline-riktningen bestäms av elementets writing-mode, directionoch text-orientation. Så när den används margin-inline-starti ett horisontellt läge från vänster till höger, fungerar det precis som margin-leftelementets startkant är vänster sida.

Men om vi ändrar writing-modetill, säg vertikalt, roteras elementet medurs och placerar startkanten uppåt. Som ett resultat margin-inline-startbeter sig precis som margin-top. 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-inline-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-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;