Propriété padding CSS
La propriété padding est utilisée pour créer un espace de remplissage sur tous les côtés du contenu d'un élément.
Les valeurs de padding sont définies à l'aide de longueurs ou de pourcentages.
INFO
Les valeurs négatives ne sont pas valides.
La propriété CSS padding est un raccourci pour les propriétés suivantes :
Nous pouvons utiliser la propriété padding pour tous les côtés (haut, bas, gauche, droite).
La propriété padding peut être définie avec une, deux, trois ou quatre valeurs :
- Lorsque quatre valeurs sont spécifiées, la première définit le côté haut, la seconde le côté droit, la troisième le côté bas et la quatrième le côté gauche.
- Lorsque trois valeurs sont spécifiées, la première définit le côté haut, la seconde les côtés droit et gauche, et la troisième définit le côté bas.
- Lorsque deux valeurs sont spécifiées, la première définit les côtés haut et bas et la seconde définit les côtés droit et gauche.
- Si le
paddingn'a qu'une seule valeur, elle s'applique aux quatre côtés
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments, sauf 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ée | Non. |
| Animable | Oui. L'espace de remplissage est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.padding = "30px"; |
Syntaxe
Syntaxe de la propriété CSS padding
padding: length | initial | inherit;Exemple de la propriété padding :
Exemple de la propriété CSS padding avec quatre valeurs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 15px 30px 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Dans l'exemple ci-dessous, ce code signifie que le padding du côté haut doit être de 15px, du côté droit de 30px, du côté bas de 20px et du côté gauche de 40px.
Exemple de la propriété padding avec la valeur "%" :
Exemple de la propriété CSS padding avec une valeur en %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 5% 10% 10% 5%;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Dans l'exemple ci-dessous, deux valeurs sont spécifiées. La première valeur définit les côtés haut et bas et la seconde valeur définit les côtés droit et gauche :
Exemple de la propriété padding avec deux valeurs :
Exemple de la propriété CSS padding avec deux valeurs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Résultat
Valeurs
| Valeur | Description | Tester » |
|---|---|---|
| length | Définit un padding en px, pt, cm, etc. La valeur par défaut est 0. | Tester » |
| % | Définit le padding en % 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
Quelles sont les fonctions du padding en CSS ?