padding-inline-end
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 janvier 2020.
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-end définit le décalage avec la fin de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété padding-top, padding-right, padding-bottom ou padding-left selon les valeurs définies pour writing-mode, direction et text-orientation.
Les autres parties « logiques » du remplissage sont définies grâce aux propriétés padding-block-start, padding-block-end et padding-inline-start.
Exemple interactif
padding-inline-end: 20px; writing-mode: horizontal-tb; padding-inline-end: 20px; writing-mode: vertical-rl; padding-inline-end: 5em; writing-mode: horizontal-tb; direction: rtl; <section id="default-example"> <div class="transition-all" id="example-element"> <div class="box"> Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. </div> </div> </section> #example-element { border: 10px solid #ffc129; overflow: hidden; text-align: left; } .box { border: dashed 1px; unicode-bidi: bidi-override; } Syntaxe
/* Valeurs de longueur */ /* Type <length> */ padding-inline-end: 10px; padding-inline-end: 1em; /* Valeurs de proportions */ /* Type <percentage> */ padding-inline-end: 5%; /* Relatif à la largeur du bloc englobant */ /* Valeurs globales */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset; Valeurs
La propriété padding-inline-end peut prendre les mêmes valeurs que la propriété padding-left.
Définition formelle
| Valeur initiale | 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 | comme <length> |
| Type d'animation | une longueur |
Syntaxe formelle
padding-inline-end =
<'padding-top'>
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
HTML
<div> <p class="exemple">Texte d'exemple Lorem y psoum</p> </div> CSS
div { background-color: yellow; width: 120px; height: 120px; } .exemple { writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #c8c800; } Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # padding-properties |
Compatibilité des navigateurs
Voir aussi
-
Les propriétés physiques correspondantes :
text-orientation