Propriété CSS Padding

La propriété CSS padding crée de l'espace à l'intérieur d'un élément, entre son contenu et sa bordure. Contrairement à margin — qui pousse l'espace à l'extérieur de la bordure, entre les éléments voisins — le padding fait partie de l'élément lui-même : il partage l'arrière-plan de l'élément et est inclus dans la zone de clic/survol.

Cette page couvre les quatre propriétés de padding individuelles, la propriété raccourcie padding et toutes ses formes de valeurs (une à quatre valeurs), les unités et pourcentages utilisables, ainsi que les pièges à éviter (pourcentages, box-sizing, et pourquoi le padding ne fusionne jamais comme le font les marges).

Les côtés individuels

Grâce aux propriétés suivantes, vous pouvez définir le padding pour chaque côté d'un élément :

Comme vous pouvez le deviner, pour le haut on utilise padding-top, pour le bas padding-bottom, pour le côté gauche padding-left et pour le droit padding-right.

Toutes les propriétés de padding acceptent les valeurs suivantes :

length — une taille fixe en px, em, rem, pt, cm, etc. (par exemple padding-top: 16px).
pourcentage (%) — un padding relatif à la largeur du bloc conteneur. Attention au piège : un padding en pourcentage vertical (haut/bas) est également calculé à partir de la largeur du conteneur, et non de sa hauteur. C'est ce qui permet l'astuce classique « padding-bottom en pourcentage » pour les boîtes à ratio d'aspect fixe.
inherit — reprend le padding calculé de l'élément parent.

Quelques règles à retenir :

Le padding ne peut pas être négatif. Si vous avez besoin de décaler du contenu dans l'autre sens, utilisez margin ou transform.
La valeur par défaut de chaque propriété de padding est 0.
Le padding ne fusionne pas. Les marges verticales adjacentes peuvent fusionner (effondrement des marges), mais deux paddings s'additionnent toujours — les éléments empilés conservent donc leurs deux paddings.
Par défaut, le padding est ajouté en plus de la width/height déclarée. Une boîte de 200px de large avec padding: 20px s'affiche sur 240px de large. Définissez box-sizing: border-box pour que le padding s'adapte à l'intérieur de la largeur déclarée.

Exemple des propriétés de padding individuelles :

Exemple d'utilisation des propriétés de padding individuelles :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: yellow;
        padding-top: 50px;
        padding-right: 30px;
        padding-bottom: 50px;
        padding-left: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Individual padding properties</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
    </div>
  </body>
</html>

Essayez vous-même »

Padding comme propriété raccourcie

La propriété CSS padding est une propriété raccourcie pour les quatre propriétés individuelles :

Le nombre de valeurs que vous passez détermine comment elles se répartissent sur les quatre côtés :

Valeurs	`padding: …`	Haut	Droite	Bas	Gauche
1	`35px`	35px	35px	35px	35px
2	`20px 40px`	20px	40px	20px	40px
3	`20px 15px 35px`	20px	15px	35px	15px
4	`25px 50px 75px 100px`	25px	50px	75px	100px

L'ordre des quatre valeurs est dans le sens des aiguilles d'une montre depuis le haut : haut, droite, bas, gauche. Avec deux ou trois valeurs, les côtés manquants reprennent en miroir le côté opposé.

Lorsque la propriété padding n'a qu'une seule valeur, par exemple padding: 35px, les quatre paddings valent 35px.

Exemple de la propriété raccourcie padding avec une valeur :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: green;
        padding: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Padding shorthand with one value</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Essayez vous-même »

La propriété padding peut avoir 2 valeurs, par exemple padding: 20px 40px, où les paddings haut et bas sont de 20px, et les paddings droit et gauche de 40px.

Exemple CSS padding avec 2 valeurs

p {
  padding: 20px 40px;
}

C'est équivalent au code suivant.

Exemple CSS padding avec 2 valeurs, forme longue, code

p {
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
}

Exemple de la propriété raccourcie padding avec deux valeurs :

Exemple de code CSS padding

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: white;
        padding: 20px 40px;
      }
    </style>
  </head>
  <body>
    <p>Paragraph with background-color, color and padding properties.</p>
  </body>
</html>

Essayez vous-même »

Résultat

La propriété padding peut avoir 3 valeurs, par exemple, padding: 20px 15px 35px;, où le padding haut est de 20px, les paddings droit et gauche sont de 15px et le padding bas est de 35px.

Exemple CSS padding avec 3 valeurs, code

p {
  padding: 20px 15px 35px;
}

C'est équivalent au code suivant.

Exemple CSS padding avec 3 valeurs, forme longue, code

p {
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 35px;
  padding-left: 15px;
}

Exemple de la propriété raccourcie padding avec trois valeurs :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: lightblue;
        padding: 20px 15px 35px;
      }
    </style>
  </head>
  <body>
    <h2>Example of the padding shorthand property</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Essayez vous-même »

Enfin, la propriété padding peut avoir quatre valeurs, par exemple padding: 25px 50px 75px 100px;, où le padding haut est de 25px, le padding droit de 50px, le padding bas de 75px et le padding gauche de 100px.

Le même exemple CSS padding

p {
  padding: 25px 50px 75px 100px;
}

Exemple de la propriété raccourcie padding avec quatre valeurs :

Exemple de la propriété raccourcie padding avec quatre valeurs (haut, droite, bas, gauche — dans le sens des aiguilles d'une montre) :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #95e5f7;
        padding: 25px 50px 75px 100px;
      }
    </style>
  </head>
  <body>
    <h2>Example of the padding shorthand property</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Essayez vous-même »

Padding vs. margin

Le padding et margin sont faciles à confondre. Utilisez padding lorsque vous souhaitez de l'espace à l'intérieur d'une boîte — entre le texte et sa bordure ou son arrière-plan. Utilisez margin lorsque vous souhaitez de l'espace entre une boîte et les éléments qui l'entourent.

Différences pratiques essentielles :

Le padding partage la couleur d'arrière-plan de l'élément ; la marge est toujours transparente.
Le padding fait partie de la zone cliquable de l'élément (pratique pour les boutons et les liens) ; la marge non.
Les marges peuvent fusionner entre éléments frères ; les paddings ne fusionnent jamais.

Sujets connexes

CSS margin — l'équivalent du padding à l'extérieur de la bordure.
CSS box-sizing — contrôle si le padding s'ajoute à ou s'intègre dans la width de l'élément.
padding-top, padding-right, padding-bottom, padding-left — les propriétés longues individuelles.

Pratique

Qu'est-ce qui décrit correctement la propriété 'padding' en CSS ?

La propriété padding crée de l'espace supplémentaire à l'intérieur de l'élément uniquement.La propriété padding ajoute de l'espace supplémentaire autour du contenu de l'élément, en dehors des bordures définies.La propriété padding est une propriété raccourcie permettant de définir les propriétés padding-top, padding-right, padding-bottom et padding-left en une seule déclaration.La propriété padding change la couleur d'arrière-plan d'un élément.La propriété padding applique une texture à l'élément.