CSS padding-inline Eigenschaft

Definition und Verwendung

des Elements padding-inline bezieht sich auf den Abstand von der Kante zum Inhalt in der Inline-Richtung. Es ist eine Abkürzung für die folgenden Eigenschaften:

• padding-inline-start
• padding-inline-end

padding-inline Die Werte der Eigenschaft können auf verschiedene Weise festgelegt werden:

Wenn die Eigenschaft padding-inline zwei Werte hat:

padding-inline: 10px 50px;

• Der Innenabstand am Anfangspunkt beträgt 10px
• Der Innenabstand am Endpunkt beträgt 50px

Wenn die Eigenschaft padding-inline einen Wert hat:

padding-inline: 10px;

• Die Innenabstände am Anfangs- und Endpunkt sind beide 10px

CSS padding-inline und padding-block Eigenschaften entsprechen 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 Zeilenrichtung und der Blockrichtung ab.

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

Beispiel

Beispiel 1

Die Innenabstände auf beiden Seiten der Zeilenrichtung festlegen:

div {
  padding-inline: 50px;
}

Probieren Sie es selbst aus

Beispiel 2

Wenn der Wert der Eigenschaft <div> ist writing-mode Wenn der Wert der Eigenschaft 'writing-mode' auf 'vertical-rl' gesetzt wird, ist die Zeilenrichtung nach unten. Das Ergebnis ist, dass der Anfang des Elements von links nach oben und das Ende des Elements von rechts nach unten verschoben wird:

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

Probieren Sie es selbst aus

Beispiel 3

Wenn der Wert der Eigenschaft <div> ist direction Wenn der Wert der Eigenschaft 'direction' auf 'rtl' gesetzt wird, ist die Zeilenrichtung von rechts nach links. Das Ergebnis ist, dass der Anfang des Elements von links nach rechts und das Ende des Elements von rechts nach links verschoben wird:

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

Probieren Sie es selbst aus

CSS-Syntax

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

Eigenschaftswert

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Eigenschaft vollständig unterstützen.

Verwandte Seiten

Referenz:CSS direction Eigenschaft

Referenz:CSS padding-inline-end Eigenschaft

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