Margin-inline-end - CSS-Tricks

Die margin-inline-endEigenschaft in CSS definiert den Platzbedarf entlang der äußeren Endkante 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-end: 25%; writing-mode: vertical-lr; )

Die Endkante in der Inline - Richtung durch das Element der bestimmt writing-mode, directionund text-orientation. Bei Verwendung margin-inline-endin einem horizontalen Kontext von links nach rechts verhält es sich also so, margin-rightals ob die Endkante des Elements die rechte Seite ist.

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

Syntax

margin-inline-end:

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-end: 20px; margin-inline-end: 2rem; margin-inline-end: 25%; /* Keyword values */ margin-inline-end: auto; /* Global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset;