Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
padding-inline
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.
Diepadding-inlineCSSKurzschreibweise definiert den logischen Inline-Anfangs- und Endabstand eines Elements, der je nach Schreibmodus, Richtung und Textorientierung des Elements auf physikalische Abstands-Eigenschaften abgebildet wird.
Probieren Sie es aus
padding-inline: 5% 10%;writing-mode: horizontal-tb;padding-inline: 15px 40px;writing-mode: vertical-rl;padding-inline: 5% 20%;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;}Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
/* <length> values */padding-inline: 10px 20px; /* An absolute length */padding-inline: 1em 2em; /* relative to the text size */padding-inline: 10px; /* sets both start and end values *//* <percentage> values */padding-inline: 5% 2%; /* relative to the nearest block container's width *//* Global values */padding-inline: inherit;padding-inline: initial;padding-inline: revert;padding-inline: revert-layer;padding-inline: unset;Diepadding-inline-Eigenschaft kann mit einem oder zwei Werten angegeben werden. Wenn ein Wert angegeben wird, wird dieser sowohl fürpadding-inline-start als auch fürpadding-inline-end verwendet. Wenn zwei Werte angegeben werden, wird der erste fürpadding-inline-start und der zweite fürpadding-inline-end verwendet.
Werte
<length>Die Größe des Abstands als fester Wert. Muss nicht negativ sein.
<percentage>Die Größe des Abstands als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch
writing-mode) desumgebenden Blocks. Muss nicht negativ sein.
Beschreibung
Die durchpadding-inline festgelegten Abstände können äquivalent zu den Eigenschaftenpadding-top undpadding-bottom oder den Eigenschaftenpadding-right undpadding-left sein, abhängig von den fürwriting-mode,direction undtext-orientation definierten Werten.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen: |
|---|---|
| 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 | wie die jeweiligen Kurzschreibweisen: |
| Animationstyp | Längenangabe |
Formale Syntax
padding-inline =
<'padding-top'>{1,2}
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length>|
<percentage>
Beispiele
Festlegen von Inline-Abstand für vertikalen Text
HTML
<div> <p>Example text</p></div>CSS
div { background-color: yellow; width: 120px; height: 120px;}.exampleText { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800;}Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-padding-inline |
Browser-Kompatibilität
Siehe auch
- CSS Logische Eigenschaften und Werte
- Die zugeordneten physikalischen Eigenschaften:
padding-top,padding-right,padding-bottom, undpadding-left writing-mode,direction,text-orientation