CSS padding-block-start Eigenschaft

Definition und Verwendung

Element padding-block-start bezeichnet den Raum vom Rand bis zum Inhalt am Anfang der Blockrichtung.

CSS padding-block und padding-inline Eigenschaften entsprechen den CSS-Eigenschaften padding-top,padding-bottom,padding-left und padding-right sehr ähnlich, aber padding-block und padding-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 Anfang und das Ende des Blocks sowie padding-block Das Ergebnis der Eigenschaft. Für englische Seiten ist die Blockrichtung nach unten, die Inline-Richtung von links nach rechts.

Beispiel

Beispiel 1

Legen Sie den Innenabstand am Anfang der Blockrichtung fest:

p {
  padding-block-start: 35px;
}

Probieren Sie es selbst aus

Beispiel 2

Setzen Sie den <div>-Element writing-mode Wenn die Eigenschaftswerte auf vertical-rl gesetzt werden, ist die Blockrichtung von rechts nach links. Das Ergebnis ist, dass der Startpunkt des Elements von oben nach rechts bewegt wird:

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

Probieren Sie es selbst aus

CSS-Syntax

padding-block-start: auto|value|initial|inherit;

Eigenschaftswert

Wert Beschreibung
auto Standard. Der Standardwert von padding-block-start für das Element.
length

Padding-block-start wird in Einheiten wie px, pt, cm angegeben. Negative Werte sind nicht erlaubt.

Siehe:CSS-Einheiten.
% Padding-block-start wird als Prozentsatz der Größe des Elements in der Zeilenrichtung angegeben.
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
Animationsproduktion: Unterstützt. Siehe:Animationsbezogene Eigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.paddingBlockStart="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 padding-block Eigenschaft

Referenz:CSS padding-block-end Eigenschaft

Referenz:CSS padding-inline Eigenschaft

Referenz:CSS padding-bottom Eigenschaft

Referenz:CSS padding-left Eigenschaft

Referenz:CSS padding-right Eigenschaft

Referenz:CSS padding-top Eigenschaft

Referenz:CSS writing-mode Eigenschaft