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 April 2021.
Die padding-block CSS Kurzschreibweise definiert den logischen Blockstart und das Blockende eines Elements, die je nach Schreibmodus, Richtung und Textausrichtung des Elements auf physische Polstereigenschaften abgebildet werden.
Probieren Sie es aus
padding-block: 10px 20px;
writing-mode: horizontal-tb;
padding-block: 20px 40px;
writing-mode: vertical-rl;
padding-block: 5% 10%;
writing-mode: horizontal-tb;
padding-block: 2em 4em;
writing-mode: vertical-lr;
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Far out in the uncharted backwaters of the unfashionable end of the
western spiral arm of the Galaxy lies a small unregarded yellow sun.
</div>
</div>
</section>
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
unicode-bidi: bidi-override;
}
Bestandteilseigenschaften
Diese Eigenschaft ist eine Kurzschreibweise 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 für padding-block-end verwendet. Bei zwei Werten 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 an wie die padding-left-Eigenschaft.
Beschreibung
Die durch padding-block spezifizierten Polsterwerte können je nach den definierten Werten für writing-mode, direction und text-orientation den Eigenschaften padding-top und padding-bottom oder den Eigenschaften padding-right und padding-left entsprechen.
Formale Definition
| Anfangswert | 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
Block-Padding für vertikalen Text einstellen
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
Loading…
Siehe auch
- CSS Logical Properties and Values
- Die zugeordneten physischen Eigenschaften:
padding-top,padding-right,padding-bottom, undpadding-left writing-mode,direction,text-orientation