padding-inline
Baseline
Large disponibilité
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.
La propriété raccourcie CSS padding-inline définit le remplissage logique au début et à la fin de l'axe en ligne d'un élément, ce qui correspond aux propriétés de remplissage physiques en fonction du mode d'écriture, de la direction et de l'orientation du texte de l'élément.
Exemple interactif
padding-inline: 5% 10%;
writing-mode: horizontal-tb;
padding-inline: 15px 40px;
writing-mode: vertical-rl;
padding-inline: 5% 20%;
writing-mode: horizontal-tb;
direction: rtl;
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Loin dans les régions inexplorées de l'extrémité démodée du bras spiral
occidental de la Galaxie se trouve un petit soleil jaune négligé.
</div>
</div>
</section>
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
unicode-bidi: bidi-override;
}
Propriétés constitutives
Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :
Syntaxe
/* Valeurs de type <length> */
padding-inline: 10px 20px; /* Des longueurs absolues */
padding-inline: 1em 2em; /* Des longueurs relatives à la taille du texte */
padding-inline: 10px; /* Une seule valeur définit le remplissage des deux côtés */
/* Valeurs de type <percentage> */
padding-inline: 5% 2%; /* Des longueurs relatives à la taille du bloc englobant */
/* Valeurs globales */
padding-inline: inherit;
padding-inline: initial;
padding-inline: revert;
padding-inline: revert-layer;
padding-inline: unset;
La propriété padding-inline peut être définie avec une ou deux valeurs. Si une seule valeur est donnée, elle est utilisée comme valeur pour padding-inline-start et padding-inline-end. Si deux valeurs sont données, la première est utilisée pour padding-inline-start et la seconde pour padding-inline-end.
Valeurs
<length>-
La taille du remplissage exprimée avec une valeur absolue. Cette valeur ne peut être négative.
<percentage>-
La taille du remplissage exprimée en pourcentage, relative à la taille en ligne (largeur dans une langue horizontale, définie par
writing-mode) du bloc englobant. Cette valeur ne peut être négative.
Description
Les valeurs de remplissage définies par padding-inline peuvent être équivalentes aux propriétés padding-top et padding-bottom ou aux propriétés padding-right et padding-left, en fonction des valeurs définies pour writing-mode, direction et text-orientation.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie : |
|---|---|
| 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 :
|
| Type d'animation | une longueur |
Syntaxe formelle
padding-inline =
<'padding-top'>{1,2}
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
Définir le remplissage en ligne pour le texte vertical
HTML
<div>
<p class="texteExemple">Texte d'exemple</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.texteExemple {
writing-mode: vertical-rl;
padding-inline: 20px 40px;
background-color: #c8c800;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-padding-inline |
Compatibilité des navigateurs
Voir aussi
- Propriétés et valeurs logiques CSS
- Les propriétés physiques correspondantes :
padding-top,padding-right,padding-bottometpadding-left - Les propriétés
writing-mode,direction,text-orientation