Marginalblock - CSS-tricks | CSS Almanack 2025

margin-blockär en förkortningsegenskap i CSS som anger ett element margin-block-startoch margin-block-endvärden, vilka båda är logiska egenskaper. Den skapar utrymme runt elementet i inline riktningen, som bestäms av elementets writing-mode, directionoch text-orientation.

Egenskapen är en del av CSS Logical Properties and Values Level 1-specifikationen som för närvarande är i Editors utkaststatus. Det betyder att definitionen och informationen om den kan ändras mellan nu och officiell rekommendation.

.element ( margin-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Om den writing-modeär inställd på horizontal-lrkommer margin-blockegenskapen att fungera precis som inställning margin-topoch margin-bottom. En intressant aspekt av den här egenskapen är att den är en av de logiska egenskaperna som inte har en en-till-en-karta med en icke-logisk egenskap. Det finns ingen äldre egenskap som anger både (och endast) marginalerna för blockriktningen.

Men ändrar elementets writing-modeatt något liknande vertical-lroch ”botten” kant roteras i vertikal riktning, i egenskap av mer som margin-leftoch margin-rightegenskaper.

Syntax

margin-block: (1,2)

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-top(upp till två gånger) som fö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

Om du är bekant med den marginstenografiska egenskapen, margin-blockkommer du att känna dig mycket bekant. Den enda skillnaden är att den fungerar i två riktningar istället för fyra.

/* Length values */ margin-block: 20px 40px; margin-block: 2rem 4rem; margin-block: 25% 15%; margin-block: 20px; /* a single value sets both values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: unset;