padding-block

padding-block ist eine CSS logische Kurzschreibweise, die die Eigenschaften padding-block-start und padding-block-end in einer einzigen Deklaration kombiniert und so Raum um den Inhalt eines Elements in **Blockrichtung** (oben und unten) schafft.

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

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

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

Die Eigenschaft padding-block kann mit einem oder zwei Werten angegeben werden. Wenn ein Wert angegeben wird, wird dieser für padding-block-start und padding-block-end verwendet. Wenn zwei Werte angegeben werden, wird der erste für padding-block-start und der zweite für padding-block-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 standardmäßigen horizontalen Top-to-Bottom-Schreibmodus (writing-mode: horizontal-tb) befinden, verläuft die Blockrichtung von oben nach unten. Wenn sich der Schreibmodus jedoch in einen vertikalen Schreibmodus (z. B. writing-mode: vertical-rl) ändert, 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, abhängig vom genauen Schreibmodus) verläuft.

Eine andere Möglichkeit, es zu betrachten: padding-block verhält sich in einem standardmäßigen horizontalen 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-block: <'padding-top'>{1,2};

Es mag seltsam erscheinen, wenn die Syntax einer Eigenschaft in der Dokumentation direkt auf die Syntax einer anderen CSS-Eigenschaft verweist, aber das ist im Grunde genau das, was sie tut. Sie besagt im Wesentlichen, dass die Eigenschaft die gleichen Werte wie padding-top (bis zu zweimal) akzeptiert, was dieser Syntax folgt

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: gleich wie entsprechende padding-* Eigenschaften
• Animationstyp: nach berechnetem Werttyp

Werte

Wenn Sie mit der Kurzschreibweise padding vertraut sind, werden Sie sich mit padding-block sehr vertraut fühlen. Der einzige Unterschied besteht darin, dass sie in zwei statt in vier Richtungen funktioniert.

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

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

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

Bestandteileigenschaften

Wir haben bereits erwähnt, dass padding-block eine Kurzschreibweise ist. Das bedeutet, dass sie mehrere Eigenschaften zu einer Deklaration zusammenfasst, und die eingeschlossenen Eigenschaften werden als *Bestandteile* bezeichnet.

Betrachten wir speziell die CSS-Eigenschaften padding-block-start und padding-block-end, die die Kurzschreibweise padding-block bilden. Sie sind nützlich, da sie es uns ermöglichen, Abstände in Blockrichtung zu definieren, eine Seite nach der anderen.

padding-block-start

padding-block-start fügt Abstände am logischen "Anfangsrand" eines Elements in Blockrichtung hinzu. Wenn wir also beispielsweise in einem standardmäßigen horizontalen Top-to-Bottom-Schreibmodus arbeiten würden, ist die Oberseite des Elements der Anfang und – Spoiler-Alarm – die Unterseite des Elements ist das Ende.

.element {
  padding-block-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 die linke Seite des Elements zum Anfangsrand wird.

Und wenn wir zu vertikal von rechts nach links wechseln, haben Sie es wahrscheinlich schon erraten: Die rechte Seite wird zum Anfangsrand.

Schreibmodus	Anfangsrand
horizontal-tb	Oben Abstand
vertical-lr	Links Abstand
vertical-rl	Rechts Abstand

padding-block-end

padding-block-end ist alles, was wir gerade bei padding-block-start gesehen haben, nur in die entgegengesetzte Richtung. Wenn also "Start" in einem horizontalen Top-to-Bottom-Schreibmodus der obere Abstand ist, ist "Ende" der untere Abstand.

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

Schreibmodus	Endrand
horizontal-tb	Unterer Abstand
vertical-lr	Rechts Abstand
vertical-rl	Links Abstand

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