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 Start der Innenabstände eines Elements, welcher zu einem physischen Abstand wird, abhängig vom Schreibmodus, der Ausrichtung und der Textorientierung des Elements.

Probieren Sie es aus

padding-inline-start: 20px;
writing-mode: horizontal-tb;

padding-inline-start: 20px;
writing-mode: vertical-rl;

padding-inline-start: 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

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 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, definiert durch writing-mode) des Umgebungsblocks. Muss nicht negativ sein.

Beschreibung

Die padding-inline-start Eigenschaft nimmt die gleichen Werte an wie physische Eigenschaften wie padding-top. Allerdings kann sie je nach den Werten, die für writing-mode, direction und text-orientation festgelegt wurden, padding-left, padding-right, padding-top oder padding-bottom entsprechen.

Sie bezieht sich auf padding-block-start, padding-block-end, und padding-inline-end, welche die anderen Innenabstands-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-Start-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

BCD tables only load in the browser

Siehe auch