padding-inline

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨avril 2021⁩.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

La propriété padding-inline définit l'espace de remplissage (padding) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés padding-top et padding-bottom ou à padding-right et padding-left selon les valeurs des propriétés writing-mode, direction et text-orientation.

css

/* Valeurs de longueur */
/* Type <length> */
padding-inline: 10px 20px; /* Des longueurs absolues */
padding-inline: 1em 2em; /* Des longueurs relatives à la taille du texte */
padding-inline: 5% 2%; /* Des longueurs relatives à la taille du bloc englobant */
padding-inline: 10px; /* Une seule valeur définit le remplissage des deux côtés */

/* Valeurs avec un mot-clé */
padding-inline: auto;

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

Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées padding-inline-start et padding-inline-end. Pour définir le remplissage sur l'axe de bloc, on pourra utiliser la propriété logique raccourcie padding-block qui définit padding-block-start et padding-block-end.

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `padding-inline-start`: `0` `padding-inline-end`: `0`
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ée	non
Pourcentages	largeur logique du bloc englobant
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `padding-inline-start`: comme `<length>` `padding-inline-end`: comme `<length>`
Type d'animation	une longueur

Syntaxe formelle

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

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

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

Exemples

CSS

css

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

.texteExemple {
  writing-mode: vertical-rl;
  padding-inline: 20px 40px;
  background-color: #c8c800;
}

HTML

html

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

Résultat

Spécifications

Specification
CSS Logical Properties and Values Level 1 # propdef-padding-inline

Compatibilité des navigateurs

Voir aussi

Les propriétés physiques correspondantes :
Les propriétés influençant les propriétés logiques :

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨1 janv. 1970⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content