Padding CSS

Propriétés padding CSS

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.

Définir les padding pour les côtés individuels

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 :

• lenght - spécifie un padding en px, em, rem, pt, cm, etc.
• % - spécifie un padding en pourcentage (%) de la largeur de l'élément conteneur.
• inherit - spécifie que le rembourrage doit être hérité de l'élément parent.

Contrairement au margin, les valeurs des propriétés de padding ne peuvent pas être négatives.

La propriété abrégée de padding

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.

• Si une valeur est spécifiée, elle est appliquée aux quatre côtés .
• Si deux valeurs sont spécifiées, la première valeur est appliquée aux côtés supérieur et inférieur , et la seconde valeur est appliquée aux côtés droit et gauche de la boîte de l'élément.
• Si trois valeurs sont spécifiées, la première valeur est appliquée à top , la deuxième valeur est appliquée à right et left, et la dernière valeur est appliquée à bottom .
• Si quatre valeurs sont spécifiées, elles sont appliquées aux côtés supérieur (top), droit (right), inférieur (bottom) et gauche (left) de la boîte de l'élément respectivement dans l'ordre spécifié.

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.

Effet du padding et de la bordure sur la mise en page

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.