Marginalinline - CSS-tricks | CSS Almanack 2025

margin-inlineär en förkortningsegenskap i CSS som anger ett element margin-inline-startoch margin-inline-endvärden, vilka båda är logiska egenskaper. Den skapar utrymme runt elementet i inline riktningen, som bestäms av elementets writing-mode, directionoch text-orientation.

Egenskapen är en del av CSS Logical Properties and Values Level 1-specifikationen som för närvarande är i Editors utkaststatus. Det betyder att definitionen och informationen om den kan ändras mellan nu och officiell rekommendation.

.element ( margin-inline: 60px auto; writing-mode: vertical-rl; /* Determines the inline start direction */ )

Om den writing-modeär inställd på horizontal-lrkommer margin-inlineegenskapen att fungera precis som inställning margin-leftoch margin-right. En intressant aspekt av den här egenskapen är att den är en av de logiska egenskaperna som inte har en en-till-en-karta med en icke-logisk egenskap. Det finns ingen äldre egenskap som anger både (och endast) inline-marginalerna.

Men ändrar elementets writing-modeatt något liknande vertical-lroch ”inline” kanter roteras i vertikal riktning, agerar mer som margin-topoch margin-bottomegenskaper.

Syntax

margin-inline: (1,2)

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-top(upp till två gånger) som fö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

Om du är bekant med den marginstenografiska egenskapen, margin-inlinekommer du att känna dig mycket bekant. Den enda skillnaden är att den fungerar i två riktningar istället för fyra.

/* Length values */ margin-inline: 20px 40px; margin-inline: 2rem 4rem; margin-inline: 25% 15%; margin-inline: 20px; /* a single value sets both values */ /* Keyword values */ margin-inline: auto; /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset;