Margin-block - CSS-trucs | CSS Almanac 2025

margin-blockis een afgekorte eigenschap in CSS die de waarden van een element margin-block-starten margin-block-endwaarden instelt , die beide logische eigenschappen zijn. Creëert ruimte rond het element in de inline richting, die bepaald wordt door het element writing-mode, directionen text-orientation.

De eigenschap maakt deel uit van de CSS Logical Properties and Values Level 1-specificatie die momenteel de Editor's Draft-status heeft. Dat betekent dat de definitie en informatie erover kan veranderen tussen nu en officiële aanbeveling.

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

Als de writing-modeis ingesteld op horizontal-lr, werkt de margin-blockeigenschap net als de instelling margin-topen margin-bottom. Een interessant aspect van deze eigenschap is dat het een van de logische eigenschappen is die geen één-op-één-kaart met een niet-logische eigenschap heeft. Er is geen oudere eigenschap die beide (en alleen) de blokrichtingmarges instelt.

Maar verander de elementen writing-modein iets dergelijks vertical-lren de "onderste" rand wordt in verticale richting gedraaid, meer als de margin-leften margin-righteigenschappen.

Syntaxis

margin-block: (1,2)

Het is een beetje raar om te zien dat de syntaxis van de ene eigenschap verwijst naar de syntaxis van een andere CSS-eigenschap in de documentatie, maar dat is het echt. Wat het in feite probeert te zeggen, is dat de eigenschap dezelfde waarden accepteert als margin-top(maximaal twee keer) die volgt op deze syntaxis:

margin-top: | | auto;

Beginwaarde: 0
Van toepassing op: alle elementen behalve interne tabelelementen, ruby-basiscontainers en ruby-annotatiecontainers
Overgenomen: nee
Percentages: zoals voor de bijbehorende fysieke eigenschap
Berekende waarde: hetzelfde als overeenkomstige margin-*eigenschappen
Animatietype: op type berekende waarde

Waarden

Als u bekend bent met de marginsteno-eigenschap, margin-blockvoelt u zich heel vertrouwd. Het enige verschil is dat het in twee richtingen werkt in plaats van in vier.

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