Propriété CSS padding-right
Comment utiliser la propriété CSS padding-right pour définir l'espace de rembourrage à droite d'un élément. Valeurs et exemples.
La propriété CSS padding-right définit la largeur de la zone de rembourrage sur le côté droit d'un élément. Le rembourrage est l'espace transparent situé entre le contenu d'un élément et sa bordure ; augmenter padding-right éloigne donc la bordure droite du contenu (le contenu lui-même reste en place ; l'élément s'élargit, sauf si box-sizing est défini sur border-box).
Cette page présente les valeurs acceptées (longueurs, pourcentages et mots-clés CSS généraux), la façon dont le rembourrage en pourcentage est calculé, ainsi que des exemples exécutables pour chaque cas. Pour définir uniquement le rembourrage droit, utilisez padding-right ; pour définir les quatre côtés simultanément, utilisez le raccourci padding.
Les valeurs négatives ne sont pas valides.
Cette propriété n'a aucun effet sur les éléments en ligne, comme <span>.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. Une exception est faite lorsque la propriété display est définie sur table-row-group, table-header-group, table-footer-group, table-row, table-column-group et table-column. S'applique également à ::first-letter. |
| Hérité | Non. |
| Animable | Oui. L'espace de rembourrage est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.paddingRight = "40px"; |
Grâce à la propriété padding, vous pouvez définir les rembourrages sur tous les côtés d'un élément en une seule déclaration.
Syntaxe
Syntaxe de la propriété CSS padding-right
padding-right: length | initial | inherit;Exemple de la propriété padding-right :
Exemple de la propriété CSS padding-right avec une valeur px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #8ebf42;
padding-right: 100px;
}
</style>
</head>
<body>
<h2>Padding-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</body>
</html>Résultat
Exemple de la propriété padding-right avec la valeur « length » :
Exemple de la propriété CSS padding-right avec une valeur pt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #8ebf42;
padding-right: 100pt;
}
</style>
</head>
<body>
<h2>Padding-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</body>
</html>Exemple de la propriété padding-right spécifiée en pourcentage :
Exemple de la propriété CSS padding-right avec une valeur % :
Une valeur en pourcentage est résolue par rapport à la largeur du bloc conteneur de l'élément, et non à sa hauteur. Cela signifie que le rembourrage droit évolue avec la largeur de la mise en page, ce qui est utile pour un espacement fluide et adaptatif.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #cccccc;
color: deepskyblue;
padding: 15px;
padding-right: 10%;
}
</style>
</head>
<body>
<h2>Padding-right property example</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
</html>Valeurs
| Valeur | Description | Essayez |
|---|---|---|
| length | Définit le rembourrage droit en px, pt, cm, etc. Sa valeur par défaut est 0px. | Essayez » |
| % | Définit le rembourrage droit en pourcentage de la largeur de l'élément conteneur. | Essayez » |
| initial | Applique la valeur par défaut de la propriété. | Essayez » |
| inherit | Hérite la propriété de son élément parent. |
Quand utiliser padding-right
Utilisez padding-right lorsque vous avez besoin d'espace uniquement sur le bord droit d'une boîte — par exemple, pour dégager le texte d'une icône en fin de ligne, pour laisser de la place à une barre de défilement, ou pour équilibrer un espacement asymétrique dans une carte. Si vous avez besoin d'un espacement égal sur tous les côtés, préférez le raccourci padding ; si vous avez besoin d'un espace à l'extérieur de la bordure plutôt qu'à l'intérieur, utilisez margin-right.
Quelques points importants à retenir :
- Le rembourrage fait partie de la zone cliquable / de l'arrière-plan. La couleur d'arrière-plan et l'image d'arrière-plan de l'élément s'étendent jusqu'au rembourrage, contrairement à la marge.
- Les valeurs négatives sont invalides. Pour décaler le contenu dans l'autre sens, utilisez une
marginnégative à la place. - Il élargit la boîte par défaut. Avec le modèle standard
content-box,padding-rights'ajoute à la largeur totale de l'élément. Définissezbox-sizing: border-boxpour conserver la largeur déclarée fixe et absorber le rembourrage vers l'intérieur.
Propriétés associées
padding-left— rembourrage du côté opposépadding-topetpadding-bottompadding— raccourci pour les quatre côtésmargin-right— espace à l'extérieur de la bordure