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 Januar 2020.
Die padding-inline-end CSS Eigenschaft definiert den logischen inneren Endabstand eines Elements, der in Abhängigkeit vom Schreibrichtung, der Richtung und der Textorientierung des Elements auf einen physischen Abstand abgebildet wird.
Probieren Sie es aus
padding-inline-end: 20px;
writing-mode: horizontal-tb;
padding-inline-end: 20px;
writing-mode: vertical-rl;
padding-inline-end: 5em;
writing-mode: horizontal-tb;
direction: rtl;
<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;
}
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 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) des umgebenden Blocks. Muss nicht negativ sein.
Beschreibung
Die Eigenschaft padding-inline-end nimmt die gleichen Werte an wie physische Abstandseigenschaften wie padding-top. Sie kann jedoch je nach den für writing-mode, direction und text-orientation festgelegten Werten äquivalent zu padding-right, padding-left, padding-top oder padding-bottom sein.
Sie steht in Beziehung zu padding-block-start, padding-block-end und padding-inline-start, die die anderen Abstandswerte des Elements definieren.
Formale Definition
| Anfangswert | 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
Einstellen des inneren Endabstands 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
Siehe auch
- CSS Logische Eigenschaften und Werte
- Die abgebildeten physischen Eigenschaften:
padding-top,padding-right,padding-bottom, undpadding-left writing-mode,direction,text-orientation