Margin-inline - CSS-tricks | CSS Almanak 2025

margin-inlineer en stenografisk egenskab i CSS, der angiver et element margin-inline-startog margin-inline-endværdier, som begge er logiske egenskaber. Det skaber plads omkring element i inline retning, som bestemmes af elementets writing-mode, directionog text-orientation.

Ejendommen er en del af CSS logiske egenskaber og værdier niveau 1 specifikation, som i øjeblikket er i Editor's kladdestatus. Det betyder, at definitionen og informationen om den kan ændre sig fra nu til officiel anbefaling.

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

Hvis den writing-modeer indstillet til horizontal-lr, margin-inlinefungerer ejendommen ligesom indstilling margin-leftog margin-right. Et interessant aspekt ved denne egenskab er, at det er en af de logiske egenskaber, der ikke har et en-til-en-kort med en ikke-logisk egenskab. Der er ingen ældre egenskab, der angiver både (og kun) margenerne for inline-retning.

Men ændre elementet er writing-modetil noget i retning vertical-lrog ”inline” kanter roteres i lodret retning, handler mere som den margin-topog margin-bottomegenskaber.

Syntaks

margin-inline: (1,2)

Det er lidt underligt at se syntaksen for en egenskab henvise til syntaksen for en anden CSS-ejendom i dokumentationen, men det er virkelig, hvad det er. Hvad det grundlæggende forsøger at sige er, at ejendommen accepterer de samme værdier som margin-top(op til to gange), der følger denne syntaks:

margin-top: | | auto;

Startværdi: 0
Gælder for: alle elementer undtagen interne bordelementer, rubinbasisbeholdere og rubinbemærkningsbeholdere
Arvet: nej
Procentdele: som for den tilsvarende fysiske egenskab
Beregnet værdi: samme som tilsvarende margin-*egenskaber
Animationstype: efter beregnet værditype

Værdier

Hvis du er fortrolig med marginstenografi-ejendommen, margin-inlinevil du føle dig meget fortrolig. Den eneste forskel er, at den fungerer i to retninger i stedet for fire.

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