padding-right
La propriété padding-right
d'un élément correspond à l'espace nécessaire à la droite d'un élément. La zone de remplissage correspond à l'espace entre le contenu et la bordure. padding-right
ne peut pas recevoir de valeurs négatives.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Note : La propriété raccourcie padding
permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris padding-right
donc).
Syntaxe
/* Valeurs de longueur */
/* Type <length> */
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;
/* Valeurs de proportions */
/* Type <percentage> */
padding-right: 10%;
/* Valeurs globales */
padding-right: inherit;
padding-right: initial;
padding-right: unset;
Valeurs
<length>
- Cette valeur définit une largeur positive. Voir
<length>
pour plus de détails. <percentage>
- Un pourcentage en rapport avec la largeur du bloc englobant. Voir
<percentage>
pour plus de détails.
Syntaxe formelle
Exemples
HTML
<p class="padd">
Elle n’avait pas bu la moitié de la bouteille,
que sa tête touchait au plafond et qu’elle fut
forcée de se baisser pour ne pas se casser le
cou.
</p>
CSS
.padd {
padding-right: 20%;
border: solid 1px;
}
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Basic Box Model La définition de 'padding-right' dans cette spécification. |
Candidat au statut de recommandation | Aucun changement. |
CSS Transitions La définition de 'padding-right' dans cette spécification. |
Version de travail | padding-right peut désormais être animée. |
CSS Level 2 (Revision 1) La définition de 'padding-right' dans cette spécification. |
Recommendation | Aucun changement. |
CSS Level 1 La définition de 'padding-right' dans cette spécification. |
Recommendation | Définition initiale. |
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 . S'applique aussi à ::first-letter et ::first-line . |
Héritée | non |
Pourcentages | se rapporte à la largeur du bloc contenant |
Valeur calculée | le pourcentage tel que spécifé ou une longeur absolue |
Type d'animation | une longueur |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Le modèle de boîtes CSS
- La propriété raccourcie
padding
qui permet de paramétrerpadding-right
,padding-top
,padding-bottom
etpadding-left
.