Margin-inline - CSS-Tricks | CSS-Almanach 2025

margin-inlineist eine Kurzform-Eigenschaft in CSS, die die Elemente margin-inline-startund margin-inline-endWerte eines Elements festlegt. Beide sind logische Eigenschaften. Es schafft Raum um das Element in der Inline - Richtung, die durch das Element der bestimmt wird writing-mode, directionund text-orientation.

Die Eigenschaft ist Teil der Spezifikation für logische CSS-Eigenschaften und -Werte der Ebene 1, die sich derzeit im Entwurfsstatus des Editors befindet. Das bedeutet, dass sich die Definition und Informationen darüber zwischen jetzt und der offiziellen Empfehlung ändern können.

.element ( margin-inline: 60px auto; writing-mode: vertical-rl; /* Determines the inline start direction */ )

Wenn das auf gesetzt writing-modeist, verhält sich horizontal-lrdie margin-inlineEigenschaft genauso wie das Setzen von margin-leftund margin-right. Ein interessanter Aspekt dieser Eigenschaft ist, dass es sich um eine der logischen Eigenschaften handelt, für die keine Eins-zu-Eins-Zuordnung mit einer nicht logischen Eigenschaft vorliegt. Es gibt keine ältere Eigenschaft, die beide (und nur) die Inline-Richtungsränder festlegt.

Ändern Sie die Elemente jedoch writing-modein "Ähnliches", vertical-lrund die "Inline" -Kanten werden in vertikaler Richtung gedreht, wobei sie sich eher wie die margin-topund margin-bottom-Eigenschaften verhalten.

Syntax

margin-inline: (1,2)

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 wie margin-top(bis zu zweimal), die dieser 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

Wenn Sie mit der marginKurzschrift-Eigenschaft vertraut sind , margin-inlinewerden Sie sich sehr vertraut fühlen. Der einzige Unterschied besteht darin, dass es in zwei statt in vier Richtungen funktioniert.

/* 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;