padding-inline-start

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-start CSS-Eigenschaft definiert den logischen Inline-Anfangs-Abstand eines Elements, welcher in einen physischen padding umgewandelt wird, abhängig vom Schreibmodus, der Schreibrichtung und der Textausrichtung des Elements.

Probieren Sie es aus

Syntax

css
/* <length> values */
padding-inline-start: 10px; /* An absolute length */
padding-inline-start: 1em; /* A length relative to the text size */

/* <percentage> value */
padding-inline-start: 5%; /* A padding relative to the block container's width */

/* Global values */
padding-inline-start: inherit;
padding-inline-start: initial;
padding-inline-start: revert;
padding-inline-start: revert-layer;
padding-inline-start: unset;

Werte

<length>

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

<percentage>

Die Größe des padding als Prozentsatz, relativ zur Inline-Größe (Breite in einer horizontalen Sprache, definiert durch writing-mode) des Containing-Block. Muss nicht-negativ sein.

Beschreibung

Die Eigenschaft padding-inline-start akzeptiert dieselben Werte wie physische Eigenschaften wie padding-top. Allerdings kann sie äquivalent zu padding-left, padding-right, padding-top oder padding-bottom sein, abhängig von den Werten, die für writing-mode, direction und text-orientation festgelegt wurden.

Sie steht in Bezug zu padding-block-start, padding-block-end und padding-inline-end, welche 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-start = 
<'padding-top'>

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

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

Beispiele

Inline-Anfangs-Abstand für vertikalen Text festlegen

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-start: 20px;
  background-color: #c8c800;
}

Ergebnis

Spezifikationen

Specification
CSS Logical Properties and Values Level 1
# padding-properties

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-start

Legend

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

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

Siehe auch