margin-inline-end | CSS-Tricks

Die CSS-Eigenschaft margin-inline-end definiert den Abstand am äußeren Endrand 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-end: 25%;
  writing-mode: vertical-lr;
}

Der Endrand in Inline-Richtung wird durch den writing-mode, die direction und die text-orientation des Elements bestimmt. Wenn Sie also margin-inline-end in einem horizontalen Links-nach-rechts-Kontext verwenden, verhält sie sich wie margin-right, da die rechte Seite der Endrand des Elements ist.

Wenn wir jedoch den writing-mode beispielsweise auf vertikal ändern, wird das Element im Uhrzeigersinn gedreht, wodurch der Endrand nach unten verlagert wird. Infolgedessen verhält sich margin-inline-end wie margin-bottom. Grundsätzlich ist der Anfangsrand relativ zu der Richtung, in der der Text fließt. Das ist es, was wir meinen, wenn wir von „logischen“ Eigenschaften sprechen.

Syntax

margin-inline-end: <‘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-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;