Rand-Block-Ende - CSS-Tricks | CSS-Almanach 2025

Die margin-block-endEigenschaft in CSS definiert den Platzbedarf entlang der äußeren Endkante eines Elements in Blockrichtung. Es ist in der Spezifikation der logischen CSS-Eigenschaftenstufe 1 enthalten, die sich derzeit im Arbeitsentwurf befindet.

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

Die Endkante in dem Block Richtung durch das Element ist bestimmt writing-mode, directionund text-orientation. Bei Verwendung margin-block-endin einem horizontalen Kontext von links nach rechts verhält es sich so, margin-bottomals ob die Startkante des Elements die Unterseite des Elements ist.

Wenn wir jedoch beispielsweise writing-modein vertikal ändern , wird das Element gedreht und die Endkante nach rechts platziert. Infolgedessen margin-block-endverhält es sich wie folgt margin-right. Grundsätzlich ist die Startkante relativ zur Strömungsrichtung. Das ist es, was wir meinen, wenn wir über „logische“ Eigenschaften sprechen.

Syntax

margin-block-end:

Es ist etwas seltsam zu sehen, dass die Syntax einer Eigenschaft direkt in der Dokumentation auf die Syntax einer anderen CSS-Eigenschaft verweist, aber genau das ist es. Grundsätzlich wird versucht zu sagen, dass die Eigenschaft dieselben Werte akzeptiert, die margin-topdieser Syntax folgen:

margin-top: | | auto;

Ursprünglicher Wert: 0
Gilt für: alle Elemente außer internen Tabellenelementen, Ruby-Basiscontainern und Ruby-Anmerkungscontainern
Geerbt: nein
Prozentsätze: wie für die entsprechende physikalische Eigenschaft
Berechneter Wert: Entspricht den entsprechenden margin-*Eigenschaften
Animationstyp: nach berechnetem Werttyp

Werte

margin-block-end akzeptiert eine einzelne Länge oder einen Schlüsselwortwert.

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