padding-block

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Die padding-block CSS-Kurzform-Eigenschaft definiert den logischen Blockanfang und das Blockende der Innenabstände eines Elements, die je nach Schreibmodus, Richtung und Textausrichtung des Elements auf physische Innenabstandseigenschaften abgebildet werden.

Probieren Sie es aus

Teilkomponenten der Eigenschaft

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css
/* <length> values */
padding-block: 10px 20px; /* An absolute length */
padding-block: 1em 2em; /* relative to the text size */
padding-block: 10px; /* sets both start and end values */

/* <percentage> values */
padding-block: 5% 2%; /* relative to the nearest block container's width */

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

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

Werte

Die padding-block-Eigenschaft nimmt die gleichen Werte wie die padding-left-Eigenschaft an.

Beschreibung

Diese Werte entsprechen den Eigenschaften padding-top und padding-bottom oder padding-right und padding-left, abhängig von den für writing-mode, direction und text-orientation definierten Werten.

Formale Definition

Initialer Wertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente außer table-row-group, table-header-group, table-footer-group, table-row, table-column-group und table-column
VererbtNein
Prozentwertelogische Breite des beinhaltenden Blocks
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
AnimationstypLängenangabe

Formale Syntax

padding-block = 
  <'padding-top'>{1,2}  

<padding-top> = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Festlegen der Block-Innenabstände für vertikalen Text

HTML

html
<div>
  <p class="exampleText">Example text</p>
</div>

CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding-block: 20px 40px;
  background-color: #c8c800;
}

Ergebnis

Spezifikationen

Specification
CSS Logical Properties and Values Level 1
# propdef-padding-block

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch