Propriété CSS padding-right
La propriété CSS padding-right définit l'espace de remplissage sur le côté droit d'un élément.
INFO
Les valeurs négatives ne sont pas valides.
INFO
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. Elle s'applique également à ::first-letter. |
| Hérité | Non. |
| Animable | Oui. L'espace de remplissage est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.paddingRight = "40px"; |
TIP
Grâce à la propriété padding, vous pouvez définir les remplissages sur tous les côtés d'un élément en une seule instruction.
Syntaxe
Syntaxe de la propriété CSS padding-right
css
padding-right: length | initial | inherit;Exemple de la propriété padding-right :
Exemple de la propriété CSS padding-right avec une valeur en px
html
<!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 en pt
html
<!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 en % :
html
<!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-left 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 | Tester |
|---|---|---|
| length | Définit le remplissage droit en px, pt, cm, etc. Sa valeur par défaut est 0px. | Tester » |
| % | Définit le remplissage droit en pourcentage de la largeur de l'élément parent. | Tester » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelle est la fonction de la propriété padding-right en CSS ?