padding-inline-end
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 janvier 2020.
La propriété CSS padding-inline-end définit le remplissage logique en fin de ligne d'un élément, qui se traduit par un remplissage physique en fonction du mode d'écriture, de la directions et de l'orientation du texte de l'élément.
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">
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;
}
Syntaxe
/* Valeurs de type <length> */
padding-inline-end: 10px; /* Une longueur absolue */
padding-inline-end: 1em; /* Une longueur relative à la taille du texte */
/* Valeurs de 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: revert;
padding-inline-end: revert-layer;
padding-inline-end: unset;
Valeurs
<length>-
La taille de remplissage en tant que valeur fixe. Cette valeur ne peut pas être négative.
<percentage>-
La taille de remplissage en pourcentage, relative à la taille en ligne (largeur dans une langue horizontale) du bloc englobant. Cette valeur ne peut pas être négative.
Description
La propriété padding-inline-end prend les mêmes valeurs que les propriétés de remplissage physique telles que padding-top. Cependant, elle peut être équivalente à padding-right, padding-left, padding-top ou padding-bottom en fonction des valeurs définies pour writing-mode, direction et text-orientation.
Elle est liée à padding-block-start, padding-block-end et padding-inline-start, qui définissent les autres valeurs de remplissage de l'élément.
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
Définir le remplissage en fin de 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-lr;
padding-inline-end: 20px;
background-color: #c8c800;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Logical Properties and Values Module Level 1 # padding-properties |
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