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.

La propriété padding-inline-start définit le décalage avec le début de la zone de remplissage d'un élément selon le mode d'écriture, la direction et l'orientation du texte.

Exemple interactif

Syntaxe

css
/* Valeurs de longueur */
/* Type <length>       */
padding-inline-start: 10px; /* Une longueur absolue */
padding-inline-start: 1em; /* Relatif à la taille du texte */

/* Valeurs de proportions */
/* Type <percentage>      */
padding-inline-start: 5%; /* Relatif à la largeur du bloc englobant */

/* Valeurs globales */
padding-inline-start: inherit;
padding-inline-start: initial;
padding-inline-start: revert;
padding-inline-start: unset;

Valeurs

<length>

La taille de la zone de remplissage exprimée de façon absolue. Les valeurs négatives sont interdites.

<percentage>

La taille de la zone de remplissage exprimée de façon relative à la taille en ligne (inline en anglais) du bloc englobant. Les valeurs négatives sont interdites.

Description

Selon sa définition dans la spécification, la propriété padding-inline-start peut prendre les mêmes valeurs que la propriété padding-top. Toutefois, elle peut en réalité correspondre à la propriété physique padding-top, padding-right ou padding-left selon les valeurs définies pour writing-mode, direction et text-orientation.

Les autres parties du remplissage sont définies grâce aux propriétés padding-block-start, padding-block-end et padding-inline-end.

Définition formelle

Valeur initiale0
Applicabilitétous les éléments exceptés table-row-group, table-header-group, table-footer-group, table-row, table-column-group et table-column
Héritéenon
Pourcentageslargeur logique du bloc englobant
Valeur calculéecomme <length>
Type d'animationune longueur

Syntaxe formelle

padding-inline-start = 
<'padding-top'>

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

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

Exemples

Définition de padding-inline-start avec du texte vertical

HTML

html
<div>
  <p class="exemple">Texte d'exemple</p>
</div>

CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exemple {
  writing-mode: vertical-lr;
  padding-inline-start: 20px;
  background-color: #c8c800;
}

Résultat

must be provided

Spécifications

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

Compatibilité des navigateurs

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.

Voir aussi