Margin-inline-start - CSS-triks

Den margin-inline-startegenskap i CSS definerer størrelsen på plass langs den ytre start kant av et element i linjeretningen. Den er inkludert i CSS Logical Properties Level 1-spesifikasjonen, som for øyeblikket er i Working Draft.

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

Startkanten i den innebygde retningen bestemmes av elementets writing-mode, directionog text-orientation. Så når den brukes margin-inline-starti en horisontal kontekst fra venstre til høyre, fungerer den akkurat som margin-leftstartkanten på elementet er venstre side.

Men hvis vi endrer til writing-modefor eksempel vertikal, roteres elementet med klokken og plasserer startkanten mot toppen. Som et resultat margin-inline-startoppfører seg akkurat som margin-top. I utgangspunktet er startkanten relativt til retningen den flyter. Det er det vi mener når vi snakker om "logiske" egenskaper.

Syntaks

margin-inline-start:

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. Hva det egentlig prøver å si er at eiendommen aksepterer de samme verdiene margin-topsom 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

margin-block-start godtar en enkelt lengde eller søkeordverdi.

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