Propriété CSS padding
Apprenez comment la propriété CSS padding ajoute de l'espace à l'intérieur de la bordure d'un élément. Syntaxe abrégée, règles de valeurs et astuces.
La propriété padding ajoute de l'espace entre le contenu d'un élément et sa bordure. Contrairement à margin, qui repousse les éléments vers l'extérieur, le padding agit à l'intérieur — il agrandit la zone cliquable ou visible de l'élément tout en maintenant la bordure en place.
Les valeurs de padding sont définies en longueurs ou en pourcentages, et elles sont toujours non négatives.
Les valeurs négatives ne sont pas autorisées pour le padding. Utilisez un margin négatif si vous avez besoin de rapprocher le contenu vers l'intérieur.
padding est une propriété abrégée qui définit les quatre côtés à la fois. Vous pouvez également contrôler chaque côté individuellement :
Le padding dans le modèle de boîte
Chaque élément HTML est enveloppé dans le modèle de boîte CSS : contenu → padding → bordure → marge, de l'intérieur vers l'extérieur. Le padding se situe entre la zone de contenu et la bordure, et fait donc partie de la région d'arrière-plan de l'élément.
Lorsque vous définissez box-sizing: border-box (valeur par défaut moderne dans la plupart des réinitialisations), le padding est inclus dans la width et la height déclarées. Avec l'ancien box-sizing: content-box, le padding s'ajoute en plus de ces dimensions. Voir box-sizing pour plus de détails.
Référence de la propriété
| Valeur initiale | 0 |
| S'applique à | Tous les éléments sauf table-row-group, table-header-group, table-footer-group, table-row, table-column-group et table-column. S'applique également à ::first-letter. |
| Héritage | Non |
| Animable | Oui |
| Version | CSS1 |
| Syntaxe DOM | element.style.padding = "30px" |
Syntaxe
padding: <length> | <percentage> | initial | inherit;Règle d'une à quatre valeurs
La propriété abrégée accepte une, deux, trois ou quatre valeurs séparées par des espaces. Le mappage suit l'ordre horaire : haut → droite → bas → gauche.
| Valeurs données | Haut | Droite | Bas | Gauche |
|---|---|---|---|---|
padding: 20px | 20px | 20px | 20px | 20px |
padding: 20px 40px | 20px | 40px | 20px | 40px |
padding: 10px 20px 30px | 10px | 20px | 30px | 20px |
padding: 10px 20px 30px 40px | 10px | 20px | 30px | 40px |
Un moyen mnémotechnique utile : les valeurs manquantes reflètent le côté opposé (gauche reflète droite ; bas reflète haut).
Exemples
Quatre valeurs (haut / droite / bas / gauche)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 15px 30px 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Le paragraphe reçoit 15 px en haut, 30 px à droite, 20 px en bas et 40 px à gauche.
Valeurs en pourcentage
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 5% 10% 10% 5%;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Les valeurs de padding en pourcentage — y compris padding-top et padding-bottom — sont toujours calculées par rapport à la largeur du bloc conteneur, et non à sa hauteur. Cela facilite la création de boîtes à rapport d'aspect fixe : un bloc avec padding-top: 56.25% conserve un ratio 16:9 quelle que soit sa largeur.
Deux valeurs (vertical / horizontal)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>padding: 20px 40px définit 20 px en haut et en bas, 40 px à gauche et à droite — une façon compacte d'appliquer un espacement symétrique.
Valeurs
| Valeur | Description |
|---|---|
length | Une taille fixe dans n'importe quelle unité de longueur CSS : px, em, rem, pt, cm, etc. La valeur par défaut est 0. |
% | Un pourcentage de la largeur du bloc conteneur (s'applique aux quatre côtés). |
initial | Réinitialise la propriété à sa valeur par défaut (0). |
inherit | Hérite de la valeur calculée de l'élément parent. |
Propriétés logiques (sensibles au mode d'écriture)
Pour les mises en page internationalisées prenant en charge le texte vertical ou de droite à gauche, les côtés physiques padding-top/right/bottom/left peuvent sembler inadaptés. CSS fournit des propriétés logiques qui respectent le sens d'écriture :
| Propriété logique | Correspond à (horizontal LTR) |
|---|---|
padding-block-start | padding-top |
padding-block-end | padding-bottom |
padding-inline-start | padding-left |
padding-inline-end | padding-right |
Les équivalents abrégés sont padding-block et padding-inline.
/* Equivalent to padding-top + padding-bottom */
padding-block: 16px;
/* Equivalent to padding-left + padding-right */
padding-inline: 24px;Ces propriétés sont prises en charge par tous les navigateurs modernes et sont préférées dans les bibliothèques de composants supportant le texte bidirectionnel.
Cas d'usage courants et points d'attention
Zone cliquable. Comme le padding fait partie de l'arrière-plan et de la zone de capture d'événements de l'élément, l'augmenter sur un bouton ou un lien agrandit la cible tactile — un avantage direct pour l'utilisabilité sur mobile.
Padding sur les éléments en ligne. Le padding horizontal sur les éléments en ligne (comme <span>) fonctionne comme prévu. Le padding vertical est appliqué visuellement mais ne repousse pas les lignes environnantes ; utilisez un élément block ou inline-block si vous avez besoin d'un rythme vertical.
Padding vs. margin. Utilisez le padding lorsque vous souhaitez que la couleur d'arrière-plan ou la bordure couvre l'espace supplémentaire. Utilisez margin lorsque l'espace doit être transparent et situé en dehors de la bordure.
Interaction avec box-sizing. Avec content-box, l'ajout de padding agrandit visuellement l'élément. Avec border-box, le padding est absorbé à l'intérieur de la largeur déclarée, rendant la mise en page plus prévisible. Voir box-sizing.
Tableaux. La propriété abrégée padding n'a aucun effet sur les lignes de tableau ni sur les groupes de colonnes. Utilisez padding sur les cellules <td> et <th> à la place, ou utilisez border-spacing pour les espaces entre les cellules.