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
Chargement…
Voir aussi
-
Les propriétés physiques correspondantes :
text-orientation