Margin-inline-end - CSS-tricks

Den margin-inline-endegenskab i CSS definerer mængde plads langs den ydre slutning kant af et element i inline retning. Det er inkluderet i CSS Logical Properties niveau 1-specifikationen, som i øjeblikket er i Working Draft.

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

Slutkanten i den inline retning bestemmes af elementets writing-mode, directionog text-orientation. Så når det bruges margin-inline-endi en vandret kontekst fra venstre mod højre, fungerer det ligesom margin-rightelementets slutkant er højre side.

Men hvis vi skifter til writing-modefor eksempel lodret, drejes elementet med uret og placerer endekanten mod bunden. Som et resultat margin-inline-endopfører sig sig som margin-bottom. Dybest set er startkanten i forhold til den retning, den flyder. Det er det, vi mener, når vi taler om "logiske" egenskaber.

Syntaks

margin-inline-end:

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, margin-topsom 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

margin-block-start accepterer en enkelt længde eller nøgleordsværdi.

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