CSS margin-block-start Eigenschaft

Definition und Verwendung

margin-block-start Eigenschaft legt den Abstand zum Beginn der Blockrichtung fest.

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

Hinweis:Verwandte CSS-Eigenschaften writing-mode Definiert die Blockrichtung. Dies beeinflusst den Start- und Endpunkt des Blocks sowie das Ergebnis der Eigenschaft "margin-block-start". Für englische Seiten ist die Blockrichtung nach unten, die Zeilenrichtung von links nach rechts.

Beispiel

Beispiel 1

Setzen Sie den Abstand zum Beginn der Blockrichtung:

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

Probieren Sie es selbst aus

Beispiel 2

Wenn der <div>-Element writing-mode Wenn die Eigenschaft "writing-mode" auf "vertical-rl" gesetzt ist, ist die Blockrichtung von rechts nach links. Das Ergebnis ist, dass der Startpunkt des Elements von oben nach rechts bewegt wird. Daher wird auch der Änderung von "writing-mode" beeinflusst margin-block-start Wirkung:

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

Probieren Sie es selbst aus

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
auto Standardwert. Der Standardabstand des Elements zur Außenrand.
length Spezifizieren Sie den Abstand, der in px, pt, cm usw. angegeben wird. Negative Werte sind erlaubt. Siehe:CSS-Unit.
% Spezifizieren Sie 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.marginBlockStart="100px"

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 Oper
87.0 87.0 41.0 12.1 73.0

Verwandte Seiten

Referenz:CSS margin-block Eigenschaft

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