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 September 2021.

Die padding-inline CSS-Kurzschreibweise definiert den logischen Start- und End-Einzug eines Elements im Inlinelayout. Diese Eigenschaft ordnet physische Padding-Eigenschaften zu, abhängig vom Schreibrichtungmodus, der Textausrichtung und der Textorientierung des Elements.

Probieren Sie es aus

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

Syntax

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

Die Eigenschaft padding-inline kann mit einem oder zwei Werten angegeben werden. Wenn ein einzelner Wert angegeben wird, gilt dieser sowohl für padding-inline-start als auch für padding-inline-end. Wenn zwei Werte angegeben werden, wird der erste Wert für padding-inline-start und der zweite für padding-inline-end verwendet.

Werte

<length>

Die Größe des Paddings als fester Wert. Muss nicht negativ sein.

<percentage>

Die Größe des Paddings als Prozentwert, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch writing-mode) des umgrenzenden Blocks. Muss nicht negativ sein.

Beschreibung

Die durch padding-inline festgelegten Padding-Werte können den Eigenschaften padding-top und padding-bottom oder den Eigenschaften padding-right und padding-left entsprechen. Dies hängt von den Werten ab, die für writing-mode, direction und text-orientation definiert sind.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
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 Wertwie die jeweiligen Kurzschreibweisen:
AnimationstypLängenangabe

Formale Syntax

padding-inline = 
<'padding-top'>{1,2}

<padding-top> =
<length-percentage [0,∞]>

<length-percentage> =
<length> |
<percentage>

Beispiele

Inline-Padding für vertikalen Text einstellen

HTML

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

CSS

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 Level 1
# propdef-padding-inline

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
padding-inline

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch