padding-inline-end
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-inline-end
CSS Eigenschaft definiert den logischen inline end padding eines Elements, der in Abhängigkeit vom Schreibmodus, der Richtung und der Textorientierung des Elements auf ein physisches Padding abgebildet wird.
Probieren Sie es aus
Syntax
/* <length> values */
padding-inline-end: 10px; /* An absolute length */
padding-inline-end: 1em; /* A length relative to the text size */
/* <percentage> value */
padding-inline-end: 5%; /* A padding relative to the block container's width */
/* Global values */
padding-inline-end: inherit;
padding-inline-end: initial;
padding-inline-end: revert;
padding-inline-end: revert-layer;
padding-inline-end: unset;
Werte
<length>
-
Die Größe des Paddings als fester Wert. Muss nicht negativ sein.
<percentage>
-
Die Größe des Paddings als Prozentsatz, relativ zur inline-size (Breite in einer horizontalen Sprache) des containing block. Muss nicht negativ sein.
Beschreibung
Die Eigenschaft padding-inline-end
nimmt dieselben Werte an wie physikalische Padding-Eigenschaften wie padding-top
. Sie kann jedoch je nach den eingestellten Werten für writing-mode
, direction
und text-orientation
gleichwertig mit padding-right
, padding-left
, padding-top
oder padding-bottom
sein.
Sie steht im Zusammenhang mit padding-block-start
, padding-block-end
und padding-inline-start
, die die anderen Padding-Werte des Elements definieren.
Formale Definition
Initialer Wert | 0 |
---|---|
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 | als length |
Animationstyp | Längenangabe |
Formale Syntax
padding-inline-end =
<'padding-top'>
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Beispiele
Festlegen des inneren End-Paddings 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-lr;
padding-inline-end: 20px;
background-color: #c8c800;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Logical Properties and Values Level 1 # padding-properties |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- CSS Logical Properties and Values
- Die zugeordneten physikalischen Eigenschaften:
padding-top
,padding-right
,padding-bottom
, undpadding-left
writing-mode
,direction
,text-orientation