padding-inline

padding-inline ist eine CSS-logische Kurzschreibweise, die die Eigenschaften padding-inline-start und padding-inline-end in einer einzigen Deklaration kombiniert und so Raum um den Inhalt eines Elements in der **inline** (links und rechts) Richtung schafft.

.element {
  padding-inline: 30px 60px;
  writing-mode: vertical-rl; /* Determines the padding block direction */
}

Wenn wir sagen, dass padding-inline "Raum um den Inhalt eines Elements schafft", meinen wir Raum, der zusätzlichen Freiraum zwischen dem Inhalt des Elements und den Rändern des Elements schafft.

Und dieser Abstand ist innerhalb von Rändern und Abständen. Mit anderen Worten, es ist der innerste Abstand, der das Box-Modell eines Elements ausmacht.

Die Eigenschaft padding-inline kann mit einem oder zwei Werten angegeben werden. Wenn ein Wert angegeben wird, wird er als Wert für padding-inline-start und padding-inline-end verwendet. Wenn zwei Werte angegeben werden, wird der erste für padding-inline-start und der zweite für padding-inline-end verwendet.

Die Richtung hängt vom Schreibmodus ab

padding-block ist eine logische Eigenschaft, was bedeutet, dass sie sich an den writing-mode einer Seite anpasst. Wenn wir uns also in einem Standard-Horizontal-von-oben-nach-unten-Schreibmodus (writing mode: horizontal-tb) befinden, verläuft die Blockrichtung von oben nach unten. Wenn sich der Schreibmodus jedoch in einen vertikalen Schreibmodus ändert (z. B. writing-mode: vertical-rl), wird das Element gedreht, wodurch die Blockrichtung zu einer Inline-Richtung wird, bei der der Abstand von links nach rechts (oder von rechts nach links, je nach genauem Schreibmodus) verläuft.

Eine andere Art, darüber nachzudenken: padding-block verhält sich in einem Standard-Horizontal-Schreibmodus wie padding-top und padding-bottom, aber in einem vertikalen Schreibmodus wie padding-left und padding-right.

Die writing-mode ist standardmäßig von oben nach unten horizontal, wenn sie nicht explizit deklariert ist.

Syntax

padding-inline: <'padding-top'>{1,2};

Es mag seltsam erscheinen, wenn die Syntax einer Eigenschaft die Syntax einer anderen CSS-Eigenschaft direkt in der Dokumentation referenziert, aber genau das tut sie. Im Grunde bedeutet sie, dass die Eigenschaft dieselben Werte wie padding-top (bis zu zweimal) akzeptiert, die dieser Syntax folgen

padding-top: <length> | <percentage> | auto;

• Anfangswert: 0
• Anwendbar auf: alle Elemente außer internen Tabellenelementen, Ruby-Basiscontainern und Ruby-Annotationen
• Vererbt: nein
• Prozentsätze: wie für die entsprechende physische Eigenschaft
• Berechneter Wert: wie die entsprechenden padding-* Eigenschaften
• Animationstyp: nach berechnetem Werttyp

Werte

Wenn Sie mit der Kurzschreibweise padding vertraut sind, wird Ihnen padding-inline sehr bekannt vorkommen. Der einzige Unterschied ist, dass sie in zwei Richtungen statt in vier funktioniert.

/* Length values */
padding-inline: 20px 40px;
padding-inline: 2rem 4rem;
padding-inline: 25% 15%;
padding-inline: 20px; /* a single value sets both values */

/* Keyword values */
padding-inline: auto;

/* Global values */
padding-inline: inherit;
padding-inline: initial;
padding-inline: unset;

Bestandteileigenschaften

Wir sagten bereits, dass padding-inline eine Kurzschreibweise ist. Das bedeutet, dass sie mehrere Eigenschaften in einer Deklaration kombiniert, und diese eingeschlossenen Eigenschaften werden als Bestandteileigenschaften bezeichnet.

Betrachten wir speziell die CSS-Eigenschaften padding-inline-start und padding-inline-end, aus denen sich die Kurzschreibweise padding-block zusammensetzt. Sie sind praktisch, da sie es uns ermöglichen, Abstände in der Inline-Richtung zu definieren, eine Seite nach der anderen.

padding-inline-start

padding-inline-start fügt Polsterung zum logischen "Anfangs"-Rand eines Elements in der Inline-Richtung hinzu. Wenn wir uns also beispielsweise in einem Standard-Horizontal-von-oben-nach-unten-Schreibmodus befinden, ist die linke Seite des Elements der Anfang und – Spoiler-Alarm – die rechte Seite des Elements ist das Ende.

.element {
  padding-inline-start: 30px;
  writing-mode: vertical-rl; /* Determines the padding block direction */
}

Aber! Wenn wir die Schreibrichtung zum Beispiel auf vertikal von links nach rechts ändern würden, wird der Anfangsrand um 90 Grad gedreht, wodurch der Anfangsrand des Elements oben liegt.

Dies gilt auch für vertikale Schreibmodi von rechts nach links, wie im obigen Beispiel gezeigt.

Schreibmodus	Anfangsrand
horizontal-tb	Linker Rand
vertical-lr	Oberer Rand
vertical-rl	Oberer Rand

padding-inline-end

padding-inline-end ist alles, was wir gerade mit padding-inline-start betrachtet haben, nur in umgekehrter Richtung. Wenn also der "Anfang" in einem horizontalen Schreibmodus von oben nach unten die linke Seite des Elements ist, ist das "Ende" die rechte Seite.

Sowohl vertikal von links nach rechts als auch vertikal von rechts nach links platziert das "Ende" am unteren Rand eines Elements.

.element {
  padding-inline-end: 30px;
  writing-mode: vertical-rl; /* Determines the padding block direction */
}

Schreibmodus	Endrand
horizontal-tb	Rechter Rand
vertical-lr	Unterer Rand
vertical-rl	Unterer Rand

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	87+	66+	87+	14.1	73

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
Ja	Ja	93+	14.7+	Nein

Weitere Informationen

• CSS Logical Properties and Values Level 1 specification
• MDN-Dokumentation

Verwandt