Docs CSS exécutables : Padding CSS

Q: Dans quel ordre sont les valeurs du raccourci padding ?

Dans le sens des aiguilles d'une montre à partir du haut : padding: top right bottom left;. Avec trois valeurs : haut, gauche et droite, bas ; avec deux valeurs : haut et bas, puis gauche et droite ; avec une valeur : les quatre côtés.

Q: Le padding augmente-t-il la taille d'un élément ?

Avec box-sizing: content-box (par défaut), oui : le padding s'ajoute à width et height. Avec box-sizing: border-box, le padding est pris à l'intérieur de la largeur, et l'élément garde la taille que vous avez définie.

Q: Comment ajouter du padding en HTML ?

Avec du CSS, dans une feuille de style ou un attribut style : . Le HTML n'a pas d'attribut padding pour les éléments en général ; l'ancien attribut cellpadding des tableaux est obsolète et remplacé par padding sur td et th.

Ce qu'est le padding

Le padding est l'espace à l'intérieur d'un élément, entre son contenu et sa bordure. Il prend le fond de l'élément : c'est la propriété qui donne de l'air à un bouton, une carte ou un badge.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

La zone bleue est le contenu. La bande verte autour correspond aux 24px de padding de chaque côté, et la bordure se trouve à l'extérieur.

Le raccourci padding : 1, 2, 3 ou 4 valeurs

padding règle les quatre côtés en une déclaration. Le nombre de valeurs décide quel côté reçoit quoi, dans le sens des aiguilles d'une montre à partir du haut :

Déclaration	Haut	Droite	Bas	Gauche
`padding: 10px;`	10	10	10	10
`padding: 10px 20px;`	10	20	10	20
`padding: 10px 20px 30px;`	10	20	30	20
`padding: 10px 20px 30px 40px;`	10	20	30	40

Deux valeurs signifient « vertical, horizontal ». Trois valeurs signifient « haut, horizontal, bas ». Quatre font le tour du cadran : haut, droite, bas, gauche (en anglais, on retient TRouBLe : top, right, bottom, left).

Tapez n'importe quel raccourci ci-dessous. La boîte se redessine et le navigateur indique ce que chaque côté a reçu :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Essayez 8px, 8px 24px, 0 0 40px et 1em 5%. Une valeur invalide, comme -10px, est ignorée et la boîte garde le dernier padding valide.

Un côté à la fois

Chaque côté a sa propre propriété, plus claire qu'un raccourci à quatre valeurs quand vous ne voulez en changer qu'un :

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Un raccourci suivi d'un côté est un schéma courant : tout régler, puis ajuster un côté.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

L'ordre compte ici : un raccourci padding écrit après padding-bottom remettrait le bas à 16px.

Padding logique : padding-inline et padding-block

padding-left et padding-right sont physiques : ils restent du même côté dans toutes les langues. Les propriétés logiques suivent au contraire le sens d'écriture, ce qu'il vous faut sur un site aussi affiché de droite à gauche :

Propriété logique	En français (de gauche à droite)	En arabe (de droite à gauche)
`padding-inline-start`	gauche	droite
`padding-inline-end`	droite	gauche
`padding-inline`	gauche et droite	droite et gauche
`padding-block`	haut et bas	haut et bas

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

Le padding agrandit la boîte (sauf en border-box)

Par défaut, width est la largeur du contenu seul, et le padding s'y ajoute. Une boîte width: 200px avec padding: 20px fait 240px de large :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

box-sizing: border-box garde la boîte à 200px et prend le padding à l'intérieur. La page du modèle de boîte détaille le calcul complet.

Padding en pourcentage

Un padding en pourcentage se mesure par rapport à la largeur du parent, sur les quatre côtés, haut et bas compris :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

C'est l'origine de l'ancienne astuce « padding-top: 56.25% » pour les boîtes vidéo en 16:9. Aujourd'hui, aspect-ratio: 16 / 9 fait le même travail directement.

Le padding sur les boutons et les liens

Le padding est la bonne façon d'agrandir un lien ou un bouton, car il fait partie de l'élément, et donc de ce que l'on peut cliquer ou toucher. Une margin ajouterait de l'espace, mais pas une cible plus grande.

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

Les valeurs acceptées par padding

Valeur	Exemple	Remarques
Longueur	`12px`, `1rem`, `0.5em`	`em` suit la taille de police de l'élément
Pourcentage	`5%`	De la largeur du bloc conteneur
`0`	`padding: 0`	Pas besoin d'unité
Négative	`-10px`	Invalide, ignorée
`auto`	`auto`	Invalide pour padding (fonctionne pour margin)

Erreurs courantes

Mauvais ordre dans le raccourci à quatre valeurs. C'est haut, droite, bas, gauche, dans le sens des aiguilles d'une montre.
Une boîte qui grandit quand vous ajoutez du padding. Définissez box-sizing: border-box.
Utiliser le padding pour séparer deux éléments. L'espace entre éléments, c'est la margin ; le padding est l'espace à l'intérieur d'un élément. Voir margin vs padding.
Un padding vertical sur un lien inline qui chevauche d'autres lignes. Passez-le en inline-block.
Un padding négatif ou padding: auto. Les deux sont invalides et ignorés sans avertissement.

Questions fréquentes

Qu'est-ce que le padding en CSS ?

Le padding est l'espace entre le contenu d'un élément et sa bordure. Il fait partie de l'élément : il affiche donc sa couleur de fond et agrandit la zone cliquable d'un lien ou d'un bouton.

Dans quel ordre sont les valeurs du raccourci padding ?

Dans le sens des aiguilles d'une montre à partir du haut : padding: top right bottom left;. Avec trois valeurs : haut, gauche et droite, bas ; avec deux valeurs : haut et bas, puis gauche et droite ; avec une valeur : les quatre côtés.

Le padding augmente-t-il la taille d'un élément ?

Avec box-sizing: content-box (par défaut), oui : le padding s'ajoute à width et height. Avec box-sizing: border-box, le padding est pris à l'intérieur de la largeur, et l'élément garde la taille que vous avez définie.

Par rapport à quoi se calcule un padding en pourcentage ?

Par rapport à la largeur du bloc conteneur, pour les quatre côtés. padding-top: 50% vaut la moitié de la largeur du parent, pas de sa hauteur, ce qui explique pourquoi les anciennes astuces de ratio utilisaient un padding vertical.

Le padding peut-il être négatif ?

Non. Une valeur de padding négative est invalide et la déclaration est ignorée. Pour tirer le contenu vers l'extérieur, utilisez plutôt une margin négative.

Comment ajouter du padding en HTML ?

Avec du CSS, dans une feuille de style ou un attribut style : <div style="padding: 16px;">. Le HTML n'a pas d'attribut padding pour les éléments en général ; l'ancien attribut cellpadding des tableaux est obsolète et remplacé par padding sur td et th.

Concepts liés