Margin-block-end - CSS-tricks | CSS Almanack 2025

Den margin-block-endegenskap i CSS definierar mängden utrymme längs den yttre avslutningen kanten av ett element i blockriktningen. Den ingår i CSS Logical Properties nivå 1-specifikationen, som för närvarande finns i Working Draft.

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

Slutkanten i blockriktningen bestäms av elementets writing-mode, directionoch text-orientation. Så när den används margin-block-endi ett horisontellt läge från vänster till höger, fungerar det precis som margin-bottomelementets startkant är botten på det.

Men om vi ändrar writing-modetill, säg vertikalt, roteras elementet och placerar ändkanten åt höger. Som ett resultat margin-block-endbeter sig det precis som margin-right. I grund och botten är startkanten relativt den riktning den flyter. Det är vad vi menar när vi talar om ”logiska” egenskaper.

Syntax

margin-block-end:

Det är ganska konstigt att se syntaxen för en egenskap som refererar till syntaxen för en annan CSS-egendom i dokumentationen, men det är verkligen vad det är. Vad det egentligen försöker säga är att egenskapen accepterar samma värden som margin-topföljer denna syntax:

margin-top: | | auto;

Ursprungligt värde: 0
Gäller: alla element utom interna bordselement, behållare av rubinbas och anteckningsbehållare
Ärvt: nej
Procentandelar: för motsvarande fysiska egendom
Beräknat värde: samma som motsvarande margin-*egenskaper
Animationstyp: efter beräknad värdetyp

Värden

margin-block-end accepterar en enda längd eller ett nyckelordsvärde

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