Margin-blok - CSS-tricks | CSS Almanak 2025

margin-blocker en stenografisk egenskab i CSS, der angiver et element margin-block-startog margin-block-endværdier, som begge er logiske egenskaber. Det skaber plads omkring element i inline retning, som bestemmes af elementets writing-mode, directionog text-orientation.

Ejendommen er en del af CSS logiske egenskaber og værdier niveau 1 specifikation, som i øjeblikket er i Editor's kladdestatus. Det betyder, at definitionen og informationen om den kan ændre sig fra nu til officiel anbefaling.

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

Hvis den writing-modeer indstillet til horizontal-lr, margin-blockfungerer ejendommen ligesom indstilling margin-topog margin-bottom. Et interessant aspekt ved denne egenskab er, at det er en af de logiske egenskaber, der ikke har et en-til-en-kort med en ikke-logisk egenskab. Der er ingen ældre egenskab, der angiver både (og kun) blokretningsmargenerne.

Men ændre elementets writing-modetil noget som vertical-lrog ”bunden” kant drejes i lodret retning, der handler mere som den margin-leftog margin-rightegenskaber.

Syntaks

margin-block: (1,2)

Det er lidt underligt at se syntaksen for en egenskab henvise til syntaksen for en anden CSS-ejendom i dokumentationen, men det er virkelig, hvad det er. Hvad det grundlæggende forsøger at sige er, at ejendommen accepterer de samme værdier som margin-top(op til to gange), der følger denne syntaks:

margin-top: | | auto;

Startværdi: 0
Gælder for: alle elementer undtagen interne bordelementer, rubinbasisbeholdere og rubinbemærkningsbeholdere
Arvet: nej
Procentdele: som for den tilsvarende fysiske egenskab
Beregnet værdi: samme som tilsvarende margin-*egenskaber
Animationstype: efter beregnet værditype

Værdier

Hvis du er fortrolig med marginstenografi-ejendommen, margin-blockvil du føle dig meget fortrolig. Den eneste forskel er, at den fungerer i to retninger i stedet for fire.

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