CSS margin-inline Eigenschaft

Definition und Verwendung

margin-inline Diese Eigenschaft definiert den Außenabstand am Anfang und am Ende in der Zeilenrichtung und ist eine Abkürzung für die folgenden Eigenschaften:

margin-inline Die Werte der Eigenschaft können auf verschiedene Weise eingestellt werden:

Wenn die Eigenschaft margin-inline zwei Werte hat:

margin-inline: 10px 50px;
  • Der Außenabstand am Anfang beträgt 10px
  • Die Außenabstand am Ende beträgt 50px

Wenn die Eigenschaft margin-inline einen Wert hat:

margin-inline: 10px;
  • haben sowohl am Anfang als auch am Ende einen Außenabstand von 10px

CSS margin-inline und margin-block Eigenschaften sind mit margin-top,margin-bottom,margin-left und margin-right Eigenschaften sind sehr ähnlich, aber margin-inline und margin-block Die Eigenschaft hängt von der Blockausrichtung und der horizontalen Ausrichtung ab.

Hinweis:verwandte CSS-Eigenschaften writing-mode und direction Definiert die horizontale Ausrichtung. Dies beeinflusst den Anfangs- und Endpunkt des Elements sowie das Ergebnis der Eigenschaft margin-inline-end. Für englische Seiten ist die Blockausrichtung nach unten, die horizontale Ausrichtung von links nach rechts.

Beispiel

Beispiel 1

Setzt den Außenabstand auf beiden Seiten der horizontalen Ausrichtung:

div {
  margin-inline: 35px;
}

Probieren Sie es selbst aus

Beispiel 2

Wenn der Wert der Eigenschaft <div> ist writing-mode Wenn der Wert der Eigenschaft 'vertical-rl' gesetzt wird, verläuft die horizontale Ausrichtung nach unten. Das Ergebnis ist, dass der Anfangsposition des Elements von links nach oben und die Endposition von rechts nach unten verschoben wird:

div {
  margin-inline: 10px 50px;
  writing-mode: vertical-rl;
}

Probieren Sie es selbst aus

Beispiel 3

Wenn der Wert der Eigenschaft <div> ist direction Wenn der Wert der Eigenschaft 'rtl' gesetzt wird, verläuft die horizontale Ausrichtung von rechts nach links. Das Ergebnis ist, dass der Anfangsposition des Elements von links nach rechts und die Endposition von rechts nach links verschoben wird:

div {
  margin-inline: 10px 50px;
  direction: rtl;
}

Probieren Sie es selbst aus

CSS-Syntax

margin-inline: auto|length|initial|inherit;

Eigenschaftswert

Wert Beschreibung
auto Standardwert. Der Standardwert für margin-inline des Elements.
length

Setzt den margin-inline in Einheiten wie px, pt, cm. Negative Werte sind erlaubt.

Siehe:CSS-Einheiten.
% Setzt den margin-inline auf einen Prozentsatz der Größe des übergeordneten Elements in der horizontalen Ausrichtung.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: auto
Vererbbarkeit: Nein
Animationserstellung: Unterstützt. Siehe:Animationseigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.marginInline="50px 10px"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Eigenschaft vollständig unterstützen.

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

Verwandte Seiten

Referenz:CSS direction Eigenschaft

Referenz:CSS margin-inline-end Eigenschaft

Referenz:CSS margin-inline-start Eigenschaft

Referenz:CSS margin-bottom Eigenschaft

Referenz:CSS margin-inline Eigenschaft

Referenz:CSS margin-left Eigenschaft

Referenz:CSS margin-right Eigenschaft

Referenz:CSS margin-top Eigenschaft

Referenz:CSS writing-mode Eigenschaft