Margin-inline | CSS-Tricks

margin-inline ist eine Kurzschreibweise in CSS, die die Werte für margin-inline-start und margin-inline-end eines Elements festlegt, beides sind logische Eigenschaften. Sie erzeugt Abstand um das Element in Inline-Richtung, die durch 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-inline: 60px auto;
  writing-mode: vertical-rl; /* Determines the inline start direction */
}

Wenn der writing-mode auf horizontal-lr gesetzt ist, verhält sich die margin-inline Eigenschaft genauso wie die Einstellung von margin-left und margin-right. Ein interessanter Aspekt dieser Eigenschaft ist, dass sie eine der logischen Eigenschaften ist, die keine Eins-zu-eins-Abbildung mit einer nicht-logischen Eigenschaft haben. Es gibt keine ältere Eigenschaft, die sowohl (und nur) die Inline-Richtungsmargen festlegt.

Aber ändern Sie den writing-mode des Elements auf etwas wie vertical-lr, und die "Inline"-Kanten werden in vertikaler Richtung gedreht und verhalten sich eher wie die margin-top und margin-bottom Eigenschaften.

Syntax

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

Es ist irgendwie seltsam, dass die Syntax einer Eigenschaft die Syntax einer anderen CSS-Eigenschaft direkt in der Dokumentation referenziert, aber genau das ist es. Im Grunde bedeutet es, dass die Eigenschaft die gleichen Werte wie margin-top akzeptiert (bis zu zweimal), 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 Kurzschreibweise margin vertraut sind, wird sich margin-inline sehr vertraut anfühlen. Der einzige Unterschied ist, dass sie in zwei Richtungen statt in vier arbeitet.

/* Length values */
margin-inline: 20px 40px;
margin-inline: 2rem 4rem;
margin-inline: 25% 15%;
margin-inline: 20px; /* a single value sets both values */

/* Keyword values */
margin-inline: auto;

/* Global values */
margin-inline: inherit;
margin-inline: initial;
margin-inline: unset;