Margin-inline - CSS-triks | CSS-almanakk 2025

margin-inlineer en stenografisk eiendom i CSS som setter et element margin-inline-startog margin-inline-endverdier, som begge er logiske egenskaper. Det skaper plass rundt elementet i linjeretningen, som bestemmes av elementets writing-mode, directionog text-orientation.

Eiendommen er en del av CSS Logical Properties and Values Level 1-spesifikasjonen som for øyeblikket er i Editor's Draft-status. Det betyr at definisjonen og informasjonen om den kan endres mellom nå og offisiell anbefaling.

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

Hvis dette writing-modeer satt til horizontal-lr, vil margin-inlineeiendommen fungere som innstillingen margin-leftog margin-right. Et interessant aspekt ved denne egenskapen er at det er en av de logiske egenskapene som ikke har et en-til-ett-kart med en ikke-logisk egenskap. Det er ingen eldre egenskaper som setter både (og bare) inline-retningsmarginene.

Men endre element er writing-modetil noe sånt vertical-lrog “inline” kanter roteres i vertikal retning, opptrer mer som margin-topog margin-bottomegenskaper.

Syntaks

margin-inline: (1,2)

Det er ganske rart å se syntaksen til en eiendom som refererer til syntaksen til en annen CSS-eiendomsrett i dokumentasjonen, men det er egentlig hva det er. Det det egentlig prøver å si er at eiendommen aksepterer de samme verdiene som margin-top(opptil to ganger) som følger denne syntaksen:

margin-top: | | auto;

Opprinnelig verdi: 0
Gjelder: alle elementer unntatt interne bordelementer, rubinbunnbeholdere og rubinbemerkningsbeholdere
Arvet: nei
Prosentandel: som for den tilsvarende fysiske egenskapen
Beregnet verdi: samme som tilsvarende margin-*egenskaper
Animasjonstype: etter beregnet verditype

Verdier

Hvis du er kjent med marginstenografi-eiendommen, margin-inlinevil du føle deg veldig kjent. Den eneste forskjellen 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;