Un bouton dont le texte touche presque les bords, une carte où le titre colle au cadre : rien ne trahit plus vite un site amateur qu'un padding trop serré, ou carrément absent. C'est la propriété qui donne de l'air au contenu, et c'est aussi l'une des toutes premières qu'on ajuste en construisant une interface.
padding se comprend vite dans son principe, mais réserve deux surprises pratiques : une valeur en pourcentage ne se comporte pas comme on l'imagine, et le padding agit directement sur la taille finale d'une boîte, un sujet détaillé dans box-sizing.
Définition
padding définit l'espace entre le contenu d'un élément et sa bordure. Contrairement à la margin, cet espace fait partie intégrante de la boîte : il reçoit le fond de l'élément, peut porter une ombre, et compte dans sa surface cliquable.
.bouton {
padding: 12px 24px;
background-color: #2563eb;
color: white;
}Ici, le fond bleu recouvre le texte et tout l'espace ajouté par le padding : douze pixels au-dessus et en dessous, vingt-quatre à gauche et à droite. Sans cette règle, le bouton se réduirait à la taille exacte de son texte, difficile à cliquer et peu engageant visuellement.
Le raccourci padding, par côté ou en un bloc
padding suit exactement la même logique de raccourci que margin : une, deux, trois ou quatre valeurs, toujours dans le sens horaire à partir du haut. Chaque côté reste aussi réglable individuellement.
| Écriture | Exemple | Effet |
|---|---|---|
| Raccourci, une valeur | padding: 16px; | Même espace sur les quatre côtés |
| Raccourci, quatre valeurs | padding: 8px 16px 8px 16px; | Haut, droite, bas, gauche |
| Propriété longue | padding-left: 16px; | Un seul côté, sans toucher aux autres |
La forme longue est utile quand un seul côté doit varier selon un contexte, par exemple un padding-left plus grand uniquement sur les éléments d'une liste imbriquée.
Padding en pourcentage : un piège silencieux
Une valeur en pourcentage sur padding-top ou padding-bottom se calcule toujours par rapport à la largeur du conteneur parent, jamais par rapport à sa hauteur. C'est contre-intuitif, et ça surprend même des développeurs expérimentés la première fois qu'ils s'en servent.
.ratio-video {
width: 100%;
padding-top: 56.25%; /* calculé sur la LARGEUR, pas la hauteur */
}Cette bizarrerie, loin d'être un bug, est justement ce qui permet la technique historique du ratio d'aspect maintenu en CSS pur : un padding-top en pourcentage crée une hauteur proportionnelle à la largeur, utile avant l'arrivée d'une propriété dédiée à ce problème.
padding ou margin : comment choisir
Le choix entre les deux se résume presque toujours à une seule question : l'espace doit-il pouvoir porter une couleur, une image de fond ou une ombre ?
padding | margin | |
|---|---|---|
| Reçoit le fond de l'élément | Oui | Non, toujours transparent |
| Fait partie de la zone cliquable | Oui | Non |
| Accepte les valeurs négatives | Non | Oui |
| Usage typique | Espace interne d'un bouton, d'une carte | Distance entre deux éléments voisins |
Dès qu'un espace doit rester visuellement rattaché à l'élément, qu'il change de couleur au survol ou qu'il agrandisse une zone cliquable, c'est du padding. Dès qu'il sert uniquement à séparer deux éléments sans rien y afficher, c'est de la marge.
Questions fréquentes
padding peut-il prendre une valeur négative ?
Non, contrairement à margin. Le navigateur ignore une valeur négative sur padding ou la traite comme invalide selon les cas, ce qui en fait une source d'erreur silencieuse à surveiller.
Le padding agrandit-il vraiment la zone cliquable d'un bouton ?
Oui, entièrement : le padding fait partie de la boîte de l'élément, donc de sa surface interactive. C'est pourquoi un bouton généreux en padding est plus facile à cliquer, en particulier sur un écran tactile, qu'un bouton réduit à la taille de son texte.
Pourquoi mon padding-top en pourcentage change-t-il quand je redimensionne la largeur de la page ?
Parce qu'un pourcentage sur padding-top ou padding-bottom se calcule toujours à partir de la largeur du conteneur, jamais de sa hauteur, même verticalement. C'est un comportement volontaire de la spécification, pas un bug, longtemps exploité pour simuler un ratio d'aspect fixe.