CSS margin-block-end Eigenschaft

Definition und Verwendung

margin-block-end Eigenschaft legt den Außenabstand am Ende der Blockrichtung fest.

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

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

Beispiel

Beispiel 1

Setzen Sie den Außenabstand am Ende der Blockrichtung:

div {
  margin-block-end: 35px;
}

Probieren Sie es selbst aus

Beispiel 2

Wenn der <div>-Element writing-mode Wenn die Eigenschaftswerte auf vertical-rl gesetzt sind, verläuft die Blockrichtung von rechts nach links. Das Ergebnis ist, dass der Abschlusspunkt des Elements von unten nach links bewegt wird. Daher wird auch die Änderung von writing-mode den Effekt von margin-block-end beeinflussen:

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

Probieren Sie es selbst aus

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
auto Standardwert. Standard-Außenabstand des Elements.
length

Spezifiziert den Abstand, ausgegeben in px, pt, cm usw. Negative Werte sind erlaubt.

Siehe:CSS-Einheiten.
% Spezifiziert den prozentualen Abstand zur Größe des übergeordneten Elements in der Zeilenrichtung.
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.marginBlockEnd="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 Oper
87.0 87.0 41.0 12.1 73.0

Verwandte Seiten

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