Margin-block-end | CSS-Tricks

Die CSS-Eigenschaft margin-block-end definiert den Abstand am äußeren Ende eines Elements in Blockrichtung. Sie ist in der CSS Logical Properties Level 1 Spezifikation enthalten, die sich derzeit im Working Draft befindet.

.element {
  margin-block-end: 25%;
  writing-mode: vertical-lr;
}

Die Endkante in Blockrichtung wird durch die writing-mode, direction und text-orientation des Elements bestimmt. Wenn Sie also margin-block-end in einem horizontalen Links-nach-rechts-Kontext verwenden, verhält sie sich genauso wie margin-bottom, da die Startkante des Elements unten liegt.

Wenn wir jedoch den writing-mode auf beispielsweise vertikal ändern, wird das Element gedreht und die Endkante liegt nach rechts. Infolgedessen verhält sich margin-block-end genauso wie margin-right. Grundsätzlich ist die Startkante relativ zu der Richtung, in der der Inhalt fließt. Das ist es, was wir mit „logischen“ Eigenschaften meinen.

Syntax

margin-block-end: <‘margin-top’>

Es ist etwas seltsam, die Syntax einer Eigenschaft zu sehen, die sich direkt in der Dokumentation auf die Syntax einer anderen CSS-Eigenschaft bezieht, aber das ist im Grunde genommen so. Im Wesentlichen soll damit gesagt werden, dass die Eigenschaft die gleichen Werte wie margin-top akzeptiert, die dieser Syntax folgt:

margin-top: <length> | <percentage> | auto;

Anfangswert: 0
Anwendbar auf: alle Elemente außer internen Tabellenelementen, Ruby-Basiscontainern und Ruby-Annotationen
Vererbt: nein
Prozentsätze: wie für die entsprechende physische Eigenschaft
Berechneter Wert: gleich wie die entsprechenden margin-* Eigenschaften
Animationstyp: nach berechnetem Werttyp

Werte

margin-block-end akzeptiert einen einzelnen Längen- oder 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;