CSS padding-block Eigenschaft

Definition und Verwendung

Element padding-block bedeutet den Abstand von der Kante zum Inhalt in der Block-Richtung, es ist die Abkürzung der folgenden Eigenschaften:

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

Wenn die Eigenschaft padding-block zwei Werte hat:

padding-block: 10px 50px;
  • Der Innenabstand am Anfang ist 10px
  • Der Innenabstand am Ende ist 50px

Wenn die Eigenschaft padding-block einen Wert hat:

padding-block: 10px;
  • Der Innenabstand am Anfang und am Ende ist 10px

CSS padding-block und padding-inline Eigenschaften sind mit 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 Block- und Inline-Richtung ab.

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

Beispiel

Beispiel 1

Blockdirection auf beiden Seiten des Innenraums einstellen:

p {
  padding-block: 35px;
}

Versuchen Sie es selbst

Beispiel 2

Wenn der <div>-Element writing-mode Wenn die Eigenschaftswert von writing-mode auf vertical-rl gesetzt wird, bewegt sich der Anfangspunkt des Elements von der oberen in die rechte Seite und der Endpunkt von der unteren in die linke Seite:

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

Versuchen Sie es selbst

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
auto Standardwert. Der Standardwert für padding-block des Elements.
length

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

Siehe:CSS-Einheiten.
% Padding-block wird als Prozentsatz der Größe des Elements in der Inline-Richtung 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
Animationserstellung: Unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.paddingBlock="100px 50px"

Browser-Unterstützung

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

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

Verwandte Seiten

Bezugnahme:CSS padding-block-end Eigenschaft

Bezugnahme:CSS padding-block-start Eigenschaft

Bezugnahme:CSS padding-inline Eigenschaft

Bezugnahme:CSS padding-bottom Eigenschaft

Bezugnahme:CSS padding-left Eigenschaft

Bezugnahme:CSS padding-right Eigenschaft

Bezugnahme:CSS padding-top Eigenschaft

Bezugnahme:CSS writing-mode Eigenschaft