Les propriétés padding CSS vous permettent de définir l'espacement entre le contenu d'un élément et sa bordure (ou le bord de la boîte de l'élément, s'il n'a pas de bordure définie).
Le padding est affecté par le background-color. Par exemple, si vous définissez la couleur d'arrière-plan d'un élément, il sera visible à travers la zone de remplissage. c'est pourquoi on l'appel aussi la marge intérieure.
Vous pouvez spécifier les padding pour les côtés individuels d'un élément, tels que les côtés supérieur, droit, inférieur et gauche, à l'aide des propriétés CSS padding-top, padding-right, padding-bottom et padding-left, respectivement. Essayons un exemple pour comprendre comment cela fonctionne :
h1 {
padding-top: 50px;
padding-bottom: 100px;
}
p {
padding-left: 75px;
padding-right: 75px;
}
Les propriétés padding peuvent être spécifiées à l'aide des valeurs suivantes :
Contrairement au margin, les valeurs des propriétés de padding ne peuvent pas être négatives.
La propriété padding est une propriété abrégée pour éviter de définir des marges intérieures de chaque côté séparément, c'est-à-dire padding-top, padding-right, padding-bottom et padding-left.
Examinons l'exemple suivant pour comprendre comment cela fonctionne :
h1 {
padding: 50px; /* s'applique à toutes les côtés */
}
p {
padding: 25px 75px; /* vertical | horizontal */
}
div {
padding: 25px 50px 75px; /* top | horizontal | bottom */
}
pre {
padding: 25px 50px 75px 100px; /* top | right | bottom | left */
}
Cette notation abrégée peut prendre une, deux, trois ou quatre valeurs séparées par des espaces.
Il est recommandé d'utiliser les propriétés abrégée, cela vous aidera à gagner du temps en évitant la saisie supplémentaire et rendra votre code CSS plus facile à suivre et à maintenir.
Lors de la création de mises en page Web, l'ajout d'un padding ou d'une bordure aux éléments produit parfois un résultat inattendu, car le padding et la bordure sont ajoutés à la largeur et à la hauteur de la boîte générée par l'élément, comme vous l'avez appris dans le chapitre sur le modèle de boîte CSS.
Par exemple, si vous définissez la largeur d'un élément <div> sur 100 % et que vous lui appliquez également un padding gauche et droite ou une bordure, la barre de défilement horizontale apparaîtra. Voyons un exemple :
div {
width: 100%;
padding: 25px;
}
Pour empêcher le padding et la bordure de modifier la largeur et la hauteur de la boîte de l'élément, vous pouvez utiliser la propriété CSS box-sizing. Dans l'exemple suivant, la largeur et la hauteur de la boîte <div> resteront inchangées, cependant, sa zone de contenu diminuera avec l'augmentation du remplissage ou de la bordure.
div {
width: 100%;
padding: 25px;
box-sizing: border-box;
}
Vous découvrirez en détail la fonctionnalité de dimensionnement des boîtes CSS dans les prochains chapitres.