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

css
/* <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

Anfangswert0
Anwendbar aufalle Elemente außer table-row-group, table-header-group, table-footer-group, table-row, table-column-group und table-column
VererbtNein
Prozentwertelogische Breite des beinhaltenden Blocks
Berechneter Wertals <length>
AnimationstypLä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

html
<div>
  <p class="exampleText">Example text</p>
</div>

CSS

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