Margin-block-start - CSS-triks

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

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

Startkanten i blokkretningen bestemmes av elementets writing-mode, directionog text-orientation. Så når den brukes margin-block-starti en vannrett kontekst fra venstre til høyre, fungerer den akkurat som margin-topstartkanten på elementet er toppen av den.

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

Syntaks

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