CSS margin-block Eigenschaft

Definition und Verwendung

margin-block Diese Eigenschaft legt den Außenabstand des Anfangs- und Endrandes in der Blockrichtung fest und ist eine Abkürzung für die folgenden Eigenschaften:

margin-block Der Wert der Eigenschaft kann auf verschiedene Weise eingestellt werden:

Wenn die Eigenschaft margin-block zwei Werte hat:

margin-block: 10px 50px;
  • Der Außenabstand des Anfangsrandes beträgt 10px
  • Die Außenabstände an der Endkante sind 50px

Wenn die Eigenschaft margin-block einen Wert hat:

margin-block: 10px;
  • Die Außenabstände an den Anfangs- und Endkanten sind beide 10px

CSS margin-block und margin-inline Eigenschaften entsprechen den margin-top,margin-bottom,margin-left und margin-right Ähnlich wie, aber margin-block und margin-inline Die Eigenschaft hängt von der Block- und Zeilenrichtung ab.

Hinweis:zugehörige CSS-Eigenschaften writing-mode Definiert die Blockrichtung. Dies beeinflusst den Anfangs- und Endpunkt des Blocks sowie margin-block Das Ergebnis der Eigenschaft. Für englische Seiten ist die Blockrichtung nach unten, und die Zeilenrichtung von links nach rechts.

Beispiel

Beispiel 1

Setzt die Außenabstände auf beiden Seiten der Blockrichtung fest:

div {
  margin-block: 35px;
}

Probieren Sie es selbst aus

Beispiel 2

Wenn der <div>-Element writing-mode Wenn die Eigenschaft writing-mode auf vertical-rl gesetzt ist, bewegt sich der Anfangspunkt des Elements in der Blockrichtung von der Oberseite nach rechts, und der Endpunkt des Elements von der Unterseite nach links. Die Änderung des writing-mode beeinflusst auch den Effekt von margin-block:

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block: 10px 50px;
}

Probieren Sie es selbst aus

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
auto Standardwert. Standardwert der margin-block für das Element.
length

Gibt margin-block in Einheiten wie px, pt, cm an. Negative Werte sind erlaubt.

Siehe:CSS-Unit.
% Setzt den Wert der margin-block in Prozent der Größe des übergeordneten Elements in der Zeilenrichtung fest.
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:Animationsspezifische Eigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.marginBlock="50px 20px"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer des ersten Browsers dar, der diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

Verwandte Seiten

Referenz:CSS margin-block-end Eigenschaft

Referenz:CSS margin-block-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