Margin-block | CSS-Tricks

margin-block ist eine Kurzschreibweise-Eigenschaft in CSS, die die Werte margin-block-start und margin-block-end eines Elements festlegt, beides sind logische Eigenschaften. Sie erzeugt Abstand um das Element in Blockrichtung, die durch die writing-mode, direction und text-orientation des Elements bestimmt wird.

Die Eigenschaft ist Teil der CSS Logical Properties and Values Level 1 Spezifikation , die sich derzeit im Entwurfsstadium befindet. Das bedeutet, dass sich die Definition und die Informationen dazu zwischen jetzt und der offiziellen Empfehlung ändern können.

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

Wenn die writing-mode auf horizontal-lr gesetzt ist, verhält sich die margin-block Eigenschaft genauso wie das Setzen von margin-top und margin-bottom. Ein interessanter Aspekt dieser Eigenschaft ist, dass sie eine der logischen Eigenschaften ist, die keine Eins-zu-Eins-Zuordnung zu einer nicht-logischen Eigenschaft haben. Es gibt keine ältere Eigenschaft, die sowohl (und nur) die Ränder in Blockrichtung festlegt.

Aber ändern Sie die writing-mode des Elements zu etwas wie vertical-lr und die "untere" Kante wird vertikal gedreht und verhält sich eher wie die margin-left und margin-right Eigenschaften.

Syntax

margin-block: <'margin-top'>{1,2}

Es ist etwas seltsam, die Syntax einer Eigenschaft zu sehen, die die Syntax einer anderen CSS-Eigenschaft direkt in der Dokumentation referenziert, aber das ist im Grunde das, was sie ist. Was sie im Grunde sagen will, ist, dass die Eigenschaft dieselben Werte wie margin-top (bis zu zweimal) akzeptiert, was 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

Wenn Sie mit der margin Kurzschreibweise-Eigenschaft vertraut sind, dann wird sich margin-block sehr vertraut anfühlen. Der einzige Unterschied ist, dass sie in zwei Richtungen statt in vier arbeitet.

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