CSS padding-inline-start Eigenschaft

Definition und Verwendung

des Elements padding-inline-start bezeichnet den Abstand vom Rand zum Inhalt am Anfang der Inline-Richtung.

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

Hinweis:verwandte CSS-Eigenschaften writing-mode und direction Definiert die Inline-Richtung. Dies beeinflusst den Start- und Endpunkt des Elements in der Inline-Richtung sowie padding-inline-start Das Ergebnis der Eigenschaft. Für englische Seiten ist die Blockrichtung nach unten, die Inline-Richtung von links nach rechts.

Beispiel

Beispiel 1

Setzen Sie den Innenabstand am Anfang der Inline-Richtung:

div {
  padding-inline-start: 50px;
}

Versuchen Sie es selbst

Beispiel 2

Setzen Sie den Wert der Eigenschaft <div> auf writing-mode Wenn der Wert der Eigenschaft 'writing-mode' auf 'vertical-rl' gesetzt ist, ist die Inline-Richtung nach unten. Das Ergebnis ist, dass der Startpunkt des Elements von links nach oben verschoben wird:

div {
  writing-mode: vertical-rl;
  padding-inline-start: 100px;
}

Versuchen Sie es selbst

Beispiel 3

Setzen Sie den Wert der Eigenschaft <div> auf direction Wenn der Wert der Eigenschaft 'direction' auf 'rtl' gesetzt ist, ist die Inline-Richtung von rechts nach links. Das Ergebnis ist, dass der Startpunkt des Elements von links nach rechts verschoben wird:

div {
  direction: rtl;
  padding-inline-start: 100px;
}

Versuchen Sie es selbst

CSS-Syntax

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

Eigenschaftswert

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

Spezifiziert den Abstand in px, pt, cm usw. Negative Werte sind nicht erlaubt.

Siehe:CSS-Einheiten.
% Spezifiziert den prozentualen Abstand zur Größe des übergeordneten Elements in der Inline-Richtung.
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.paddingInlineStart="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 direction-Eigenschaft

Referenz:CSS padding-inline Eigenschaft

Referenz:CSS padding-inline-end 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