La propriété Padding de CSS est utilisée pour définir l’espace entre le contenu de l’élément et la bordure de l’élément.
Elle se distingue de la marge CSS par la manière dont la marge CSS définit l’espace autour des éléments. Le remplissage CSS est affecté par les couleurs d’arrière-plan. Cela efface une zone autour du contenu.
Les rembourrages haut, bas, gauche et droit peuvent être modifiés indépendamment à l’aide de propriétés distinctes. Vous pouvez également modifier toutes les propriétés en même temps à l’aide de la propriété de remplissage abrégé.
Propriétés de padding CSS
| Propriété | La description |
|---|---|
| padding | Il est utilisé pour définir toutes les propriétés de remplissage dans une déclaration. |
| padding-left | Il est utilisé pour définir le remplissage gauche d’un élément. |
| padding-right | Il est utilisé pour définir le rembourrage correct d’un élément. |
| padding-top | Il est utilisé pour définir le remplissage supérieur d’un élément. |
| padding-bottom | Il est utilisé pour définir le remplissage inférieur d’un élément. |
Valeurs de padding CSS
| Valeur | La description |
|---|---|
| longueur | Il est utilisé pour définir un remplissage fixe en pt, px, em, etc. |
| % | Il définit le remplissage en% de l’élément conteneur. |
Exemple de padding CSS
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>
</head>
<body>
<p> Il s'agit d'un paragraphe pour lequel aucun padding n'a été spécifié.</p>
<p class="padding">Ceci est un paragraphe avec un padding spécifié.</p>
</body>
</html>
Résultat :
