Propriété CSS padding

La propriété padding crée la zone de remplissage sur tous les côtés du contenu d'un élément.

Les valeurs de padding sont définies en utilisant longueurs ou pourcentages.

Valeurs négatives ne sont pas valides.

La propriété CSS padding est une propriété en sténo pour les propriétés suivantes:

Nous pouvons utiliser la propriété padding pour tous les côtés (haut, bas, gauche, droit).

La propriété padding peut être spécifiée en utilisant une, deux, trois ou quatre valeurs:

Quand les quatre valeurs sont spécifiées, la première valeur définit le côté supérieur, la deuxième définit le côté droit, la troisième définit le côté inférieur et la quatrième définit le côté gauche.
Quand il y a trois valeurs spécifiées, la première définit le côté supérieur, la deuxième définit le côté droit et le côté gauche, et la troisième définit le côté inférieur.
Quand il y a deux valeurs spécifiées, la première définit le côté supérieur et le côté inférieur, la deuxième définit le côté droit et le côté gauche.
Si padding n'a qu'une valeur, elle est appliquée à tous les qautre côtés.

Valeur initiale	0
Appliquée à	Tous les éléments, sauf quand la propriété display est définie à table-row-group, table-header-group, table-footer-group, table-row, table-column-group et table-column. Elle est aussi appliquée au pseudo-élément ::first-letter.
Héritée	Non.
Animable	Oui. La zone de remplissage est animable.
Version	CSS1
Syntaxe DOM	object.style.padding = "30px";

Syntaxe

padding: length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 20px 40px 20px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété padding</h2>
    <p>Paragraphe avec les propriétés background-color, color et padding.</p>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple donné, ce code signifie que le remplissage dans la partie supérieure doit être de 20 pixels, dans le côté droit de 40 pixels, dans le côté inférieur de 20 pixels et dans le côté gauche de 40 pixels.

Un autre exemple, dans lequel padding est définie en pourcentages:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 5% 10% 10% 5%;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété padding</h2>
    <p>Paragraphe avec les propriétés background-color, color et padding.</p>
  </body>
</html>

Essayez-vous-même!

Un exemple, dans lequel deux valeurs sont spécifiées. La première valeur définit les côtés supérieur et inférieur et la seconde valeur définit les côtés droit et gauche:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      background-color: #1c87c9;
      color: #fff;
      padding: 20px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété padding</h2>
    <p>Paragraphe avec les propriétés background-color, color et padding.</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
length	Définit un remplissage en px, pt, cm, etc. La valeur initiale est 0.
%	Définit le remplissage en % de l'élément contenu.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.