Margin-block-end - CSS-trucs | CSS Almanac 2025

De margin-block-endeigenschap in CSS definieert de hoeveelheid ruimte langs de buitenste eindrand van een element in de blokrichting. Het is opgenomen in de CSS Logical Properties Level 1-specificatie, die momenteel in Working Draft staat.

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

De eindrand in de blokrichting wordt bepaald door de elementen writing-mode, directionen text-orientation. Dus bij gebruik margin-block-endin een horizontale context van links naar rechts, gedraagt het zich net zoals margin-bottomde beginrand van het element de onderkant ervan is.

Maar als we het veranderen writing-modein, laten we zeggen, verticaal, wordt het element geroteerd, waardoor de eindrand naar rechts wordt geplaatst. Als resultaat margin-block-endgedraagt het zich net als margin-right. Kortom, de startrand is relatief ten opzichte van de richting waarin deze stroomt. Dat is wat we bedoelen als we het hebben over "logische" eigenschappen.

Syntaxis

margin-block-end:

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-topdeze syntaxis volgt:

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

margin-block-end accepteert een enkele lengte of trefwoordwaarde.

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