CSS inset-block-start Eigenschaft

Definition und Verwendung

inset-block-start Eigenschaft, um den Abstand zwischen dem Anfang des Elements in der Blockrichtung und dem übergeordneten Element zu setzen.

Hinweis:Um diese Eigenschaft生效，必须指定 position Eigenschaft.

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

Hinweis:verwandte CSS-Eigenschaften writing-mode Definiert die Blockrichtung. Dies beeinflusst den Anfang und das Ende des Blocks sowie inset-block-start 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 Abstand zwischen dem positionierten <div>-Element und dem übergeordneten Element in der Blockrichtung:

div {
  inset-block-start: 50px;
}

Probieren Sie es selbst aus

Beispiel 2

Wenn der <div>-Element writing-mode Wenn der Wert der Eigenschaft 'vertical-rl' gesetzt ist, ist die Blockrichtung von rechts nach links. Das Ergebnis ist, dass der Anfang des Elements von oben nach rechts bewegt wird:

div {
  inset-block-start: 50px;
  writing-mode: vertical-rl;
}

Probieren Sie es selbst aus

CSS-Syntax

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

Eigenschaftswert

Technische Details

Browser-Unterstützung

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

Verwandte Seiten

Tutorial:CSS-Position

Referenz:CSS position Eigenschaft

Referenz:CSS writing-mode Eigenschaft