CSS inset-block Eigenschaft

Definition und Verwendung

inset-block Die Abstandseinstellungen der Eigenschaftselemente zum übergeordneten Element in der Blöcke-Richtung.

Hinweis:Um diese Eigenschaft wirksam zu machen, muss sie angegeben werden. position Eigenschaft.

inset-block Die Eigenschaft ist eine Abkürzung für die folgenden Eigenschaften:

• inset-block-start
• inset-block-end

inset-block Der Wert der Eigenschaft kann auf verschiedene Weise festgelegt werden:

Wenn die Eigenschaft inset-block zwei Werte hat:

inset-block: 10px 50px;

• Die Anfangsdistanz beträgt 10px
• Die Enddistanz beträgt 50px

Wenn die Eigenschaft inset-block einen Wert hat:

inset-block: 10px;

• Die Anfangs- und Enddistanzen sind beide 10px

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

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

Beispiel

Beispiel 1

Stellen Sie die Distanz zwischen einem positionierten <div>-Element und seinem übergeordneten Element in der Blockrichtung ein:

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

Versuchen Sie es selbst

Beispiel 2

Wenn der <div>-Element writing-mode Wenn die Eigenschaft value auf vertical-rl gesetzt ist, bewegt sich der Anfangspunkt des Elements von der Oberseite zur rechten Seite, und der Endpunkt des Elements von der Unterseite zur linken Seite:

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

Versuchen Sie es selbst

CSS-Syntax

inset-block: 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

Bezugnahme:CSS position Eigenschaft

Bezugnahme:CSS inset-block-end Eigenschaft

Bezugnahme:CSS inset-block-start Eigenschaft

Bezugnahme:CSS writing-mode Eigenschaft