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'unetechnologie expérimentale.
Vérifiez attentivement letableau 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éspadding-top etpadding-bottom ou àpadding-right etpadding-left selon les valeurs des propriétéswriting-mode,direction ettext-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éespadding-inline-start etpadding-inline-end. Pour définir le remplissage sur l'axe de bloc, on pourra utiliser la propriété logique raccourciepadding-block qui définitpadding-block-start etpadding-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	unelongueur

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;}