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

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi