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
/* <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 Wert | wie die jeweiligen Kurzschreibweisen: |
---|---|
Anwendbar auf | alle Elemente außer table-row-group , table-header-group , table-footer-group , table-row , table-column-group und table-column |
Vererbt | Nein |
Prozentwerte | logische Breite des beinhaltenden Blocks |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | Lä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
<div>
<p class="exampleText">Example text</p>
</div>
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
- CSS Logical Properties and Values
- Die zugeordneten physischen Eigenschaften:
padding-top
,padding-right
,padding-bottom
, undpadding-left
writing-mode
,direction
,text-orientation