Margin-inline-start | CSS-Tricks

Die CSS-Eigenschaft margin-inline-start definiert den Abstand entlang der äußeren Startkante eines Elements in Inline-Richtung. Sie ist in der CSS Logical Properties Level 1 Spezifikation enthalten, die sich derzeit im Arbeitsentwurf befindet.

.element {
  margin-inline-start: 25%;
  writing-mode: vertical-lr;
}

Die Startkante in Inline-Richtung wird durch den writing-mode, die direction und die text-orientation des Elements bestimmt. Wenn Sie also margin-inline-start in einem horizontalen Links-nach-rechts-Kontext verwenden, verhält es sich wie margin-left, da die Startkante des Elements die linke Seite ist.

Wenn wir jedoch den writing-mode beispielsweise auf vertikal ändern, wird das Element im Uhrzeigersinn gedreht, wodurch die Startkante nach oben zeigt. Infolgedessen verhält sich margin-inline-start wie margin-top. Grundsätzlich ist die Startkante relativ zur Flussrichtung. Das meinen wir, wenn wir von „logischen“ Eigenschaften sprechen.

Syntax

margin-inline-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-inline-start: 20px;
margin-inline-start: 2rem;
margin-inline-start: 25%;

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

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

Demo

Klicken Sie auf die Schaltfläche in der folgenden Demo, um zu sehen, wie sich die startseitige Inline-Kante des Elements mit dem writing-mode ändert.