Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
padding-block-start
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Diepadding-block-startCSS Eigenschaft definiert das logische Blockanfangs-Padding eines Elements, welches je nach Schreibmodus, Richtung und Textorientierung des Elements einem physischen Padding zugeordnet wird.
Probieren Sie es aus
padding-block-start: 20px;writing-mode: horizontal-tb;padding-block-start: 20px;writing-mode: vertical-rl;padding-block-start: 5em;writing-mode: horizontal-tb;padding-block-start: 5em;writing-mode: vertical-lr;<section> <div> <div> 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;}Syntax
/* <length> values */padding-block-start: 10px; /* An absolute length */padding-block-start: 1em; /* A length relative to the text size *//* <percentage> value */padding-block-start: 5%; /* A padding relative to the block container's width *//* Global values */padding-block-start: inherit;padding-block-start: initial;padding-block-start: revert;padding-block-start: revert-layer;padding-block-start: unset;Werte
<length>Die Größe des Paddings als fester Wert. Muss nicht negativ sein.
<percentage>Die Größe des Paddings als Prozentsatz, relativ zurinline-size (Breite in einer horizontalen Sprache) desumschließenden Blocks. Muss nicht negativ sein.
Beschreibung
Diepadding-block-start-Eigenschaft nimmt dieselben Werte an wie physische Padding-Eigenschaften wiepadding-top. Sie kann jedochpadding-top,padding-bottom,padding-left oderpadding-right entsprechen, abhängig von den fürwriting-mode,direction undtext-orientation gesetzten Werten.
Sie steht in Beziehung zupadding-block-end,padding-inline-start, undpadding-inline-end, welche die anderen Padding-Werte des Elements definieren.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | alle Elemente außertable-row-group,table-header-group,table-footer-group,table-row,table-column-group undtable-column |
| Vererbt | Nein |
| Prozentwerte | logische Breite des beinhaltenden Blocks |
| Berechneter Wert | als<length> |
| Animationstyp | Längenangabe |
Formale Syntax
padding-block-start =
<'padding-top'>
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length>|
<percentage>
Beispiele
Festlegen des Blockanfangs-Paddings für vertikalen Text
HTML
<div> <p>Example text</p></div>CSS
div { background-color: yellow; width: 120px; height: 120px;}.exampleText { writing-mode: vertical-lr; padding-block-start: 20px; background-color: #c8c800;}Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # padding-properties |
Browser-Kompatibilität
Siehe auch
- CSS Logical Properties and Values
- Die abgebildeten physischen Eigenschaften:
padding-top,padding-right,padding-bottom, undpadding-left writing-mode,direction,text-orientation