Margin-Inline-Start - CSS-Tricks

Die margin-inline-startEigenschaft in CSS definiert den Platzbedarf entlang der äußeren Startkante eines Elements in Inline-Richtung. Es ist in der Spezifikation der logischen CSS-Eigenschaftenstufe 1 enthalten, die sich derzeit im Arbeitsentwurf befindet.

.element ( margin-inline-start: 25%; writing-mode: vertical-lr; )

Die Startkante in der Inline - Richtung durch das Element der bestimmt writing-mode, directionund text-orientation. Wenn Sie also margin-inline-startin einem horizontalen Kontext von links nach rechts verwenden, verhält es sich so, margin-leftals ob die Startkante des Elements die linke Seite ist.

Wenn wir jedoch beispielsweise writing-modevertikal ändern , wird das Element im Uhrzeigersinn gedreht und die Startkante nach oben gelegt. Infolgedessen margin-inline-startverhält sich wie margin-top. Grundsätzlich ist die Startkante relativ zur Strömungsrichtung. Das ist es, was wir meinen, wenn wir über „logische“ Eigenschaften sprechen.

Syntax

margin-inline-start:

Es ist etwas seltsam zu sehen, dass die Syntax einer Eigenschaft direkt in der Dokumentation auf die Syntax einer anderen CSS-Eigenschaft verweist, aber genau das ist es. Grundsätzlich wird versucht zu sagen, dass die Eigenschaft dieselben Werte akzeptiert, die margin-topdieser Syntax folgen:

margin-top: | | auto;

Ursprünglicher Wert: 0
Gilt für: alle Elemente außer internen Tabellenelementen, Ruby-Basiscontainern und Ruby-Anmerkungscontainern
Geerbt: nein
Prozentsätze: wie für die entsprechende physikalische Eigenschaft
Berechneter Wert: Entspricht den entsprechenden margin-*Eigenschaften
Animationstyp: nach berechnetem Werttyp

Werte

margin-block-start akzeptiert eine einzelne Länge oder einen 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;