Margin-inline-end - CSS-tricks

Den margin-inline-endegenskap i CSS definierar mängden utrymme längs den yttre avslutningen kanten 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-end: 25%; writing-mode: vertical-lr; )

Slutkanten i inline-riktningen bestäms av elementets writing-mode, directionoch text-orientation. Så när den används margin-inline-endi ett horisontellt vänster-till-höger-sammanhang, fungerar det precis margin-rightsom att ändkanten på elementet är höger sida.

Men om vi ändrar writing-modetill, säg vertikalt, roteras elementet medurs och placerar ändkanten mot botten. Som ett resultat margin-inline-endbeter sig precis som margin-bottom. 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-end:

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-end: 20px; margin-inline-end: 2rem; margin-inline-end: 25%; /* Keyword values */ margin-inline-end: auto; /* Global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset;