Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
padding-inline-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-inline-startCSS-Eigenschaft definiert die logische Startauffüllung einer Zeile eines Elements, die abhängig vom Schreibmodus, der Richtung und der Textorientierung des Elements zu einer physischen Auffüllung wird.
Probieren Sie es aus
padding-inline-start: 20px;writing-mode: horizontal-tb;padding-inline-start: 20px;writing-mode: vertical-rl;padding-inline-start: 5em;writing-mode: horizontal-tb;direction: rtl;<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-inline-start: 10px; /* An absolute length */padding-inline-start: 1em; /* A length relative to the text size *//* <percentage> value */padding-inline-start: 5%; /* A padding relative to the block container's width *//* Global values */padding-inline-start: inherit;padding-inline-start: initial;padding-inline-start: revert;padding-inline-start: revert-layer;padding-inline-start: unset;Werte
<length>Die Größe der Auffüllung als fester Wert. Muss nicht-negativ sein.
<percentage>Die Größe der Auffüllung als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode) desumschließenden Blocks. Muss nicht-negativ sein.
Beschreibung
Diepadding-inline-start-Eigenschaft nimmt die gleichen Werte wie physische Eigenschaften wiepadding-top an. Sie kann jedoch je nach den fürwriting-mode,direction undtext-orientation gesetzten Werten äquivalent zupadding-left,padding-right,padding-top oderpadding-bottom sein.
Sie steht in Bezug zupadding-block-start,padding-block-end undpadding-inline-end, welche die anderen Auffüllungswerte 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-inline-start =
<'padding-top'>
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length>|
<percentage>
Beispiele
Festlegen der Startauffüllung 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-inline-start: 20px; background-color: #c8c800;}Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # padding-properties |
Browser-Kompatibilität
Siehe auch
- CSS Logische Eigenschaften und Werte
- Die zugeordneten physischen Eigenschaften:
padding-top,padding-right,padding-bottom, undpadding-left writing-mode,direction,text-orientation