Margin-block-end - CSS-triks | CSS-almanakk 2025

Den margin-block-endegenskap i CSS definerer størrelsen på plass langs den ytre kant avslutningen 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-end: 25%; writing-mode: vertical-lr; )

Endekanten i blokkretningen bestemmes av elementets writing-mode, directionog text-orientation. Så når det brukes margin-block-endi en horisontal kontekst fra venstre til høyre, fungerer den akkurat som margin-bottomstartkanten på elementet er bunnen av det.

Men hvis vi endrer til writing-modefor eksempel vertikal, blir elementet rotert og plasserer endekanten mot høyre. Som et resultat margin-block-endoppfører vi seg som margin-right. I utgangspunktet er startkanten relativt til retningen den flyter. Det er det vi mener når vi snakker om "logiske" egenskaper.

Syntaks

margin-block-end:

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-end godtar en enkelt lengde eller søkeordverdi.

/* Length values */ margin-block-end: 20px; margin-block-end: 2rem; margin-block-end: 25%; /* Keyword values */ margin-block-end: auto; /* Global values */ margin-block-end: inherit; margin-block-end: initial; margin-block-end: unset;