Margin-inline-start - CSS-tricks

Den margin-inline-startegenskab i CSS definerer mængde plads langs den ydre start 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-start: 25%; writing-mode: vertical-lr; )

Udgangs kant i inline retning bestemmes af elementets writing-mode, directionog text-orientation. Så når det bruges margin-inline-starti en vandret kontekst fra venstre mod højre, fungerer det ligesom margin-leftelementets startkant er venstre side.

Men hvis vi skifter til writing-modefor eksempel lodret, drejes elementet med uret og placerer startkanten mod toppen. Som et resultat margin-inline-startopfører sig sig som margin-top. 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-start:

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