Margin-block-start | CSS-Tricks

Die CSS-Eigenschaft margin-block-start definiert den Abstand am äußeren Anfangsrand 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-start: 25%;
  writing-mode: vertical-lr;
}

Der Anfangsrand in Blockrichtung wird durch die writing-mode, direction und text-orientation des Elements bestimmt. Wenn Sie also margin-block-start in einem horizontalen Links-nach-rechts-Kontext verwenden, verhält es sich genauso wie margin-top, da der Anfangsrand des Elements oben ist.

Wenn wir jedoch den writing-mode zum Beispiel auf vertikal ändern, wird das Element gedreht, wodurch der Anfangsrand nach links zeigt. Infolgedessen verhält sich margin-block-start genauso wie margin-left. Grundsätzlich ist der Anfangsrand relativ zu der Richtung, in die er fließt. Das meinen wir, wenn wir von „logischen“ Eigenschaften sprechen.

Syntax

margin-block-start: <‘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-start akzeptiert einen einzelnen Längen- oder Schlüsselwortwert.

/* Length values */
margin-block-start: 20px;
margin-block-start: 2rem;
margin-block-start: 25%;

/* Keyword values */
margin-block-start: auto;

/* Global values */
margin-block-start: inherit;
margin-block-start: initial;
margin-block-start: unset;