padding

La propriété padding est une propriété raccourcie qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. les boîtes CSS). Elle synthétise padding-top, padding-right, padding-bottom, padding-left.

La zone de remplissage correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.

Note : Le padding permet de créer un espace supplémentaire à l'intérieur d'un élément. La marge (margin) permet quant à elle de créer un espace supplémentaire à l'extérieur de l'élément.

Syntaxe

/* On applique la même valeur aux quatre côtés */
padding: 1em;

/* vertical | horizontal */
padding: 5% 10%;

/* haut | horizontal | bas */
padding: 1em 2em 2em;

/* haut | droit | bas | gauche */
padding: 5px 1em 0 2em;

/* Valeurs globales */
padding: inherit;
padding: initial;
padding: unset;

Selon la quantité de valeurs utilisées, on a un effet différent. Chaque valeur peut être une longueur (<length>) ou un pourcentage (<percentage>). Les valeurs négatives ne sont pas autorisées.

  • Une valeur applique le même écart aux 4 côtés.
  • Deux valeurs appliquent le premier écart en haut et en bas et le second sur les côtés droit et gauche.
  • Trois valeurs appliquent le premier écart en haut, le deuxième à droite et à gauche et le troisième en bas.
  • Quatre valeurs appliquent le premier écart en haut, le deuxième à droite, le troisième en bas et le quatrième à gauche.

Valeurs

Les valeurs permettent de définir une, deux, trois ou quatre valeurs pour les écarts de remplissage. On peut utiliser des valeurs de type :

<length>
Définit un écart fixe. Voir la page <length> sur les valeurs de ce type.
<percentage>
Définit un écart relatif à la largeur du bloc englobant. Voir la page <percentage> pour plus d'informations sur les valeurs de ce type.

Syntaxe formelle

[ <length> | <percentage> ]{1,4}

Exemples

HTML

<h4>Coucou le monde !</h4>
<h3>Le remplissage n'est pas le même ici.</h3>

CSS

h4 {
  background-color: green;
  padding: 50px 20px 20px 50px;
}

h3 {
  background-color: blue;
  padding: 400px 5%;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Basic Box Model
La définition de 'padding' dans cette spécification.
Candidat au statut de recommandation Aucun changement.
CSS Transitions
La définition de 'padding' dans cette spécification.
Version de travail padding peut être animée.
CSS Level 2 (Revision 1)
La définition de 'padding' dans cette spécification.
Recommendation Aucun changement.
CSS Level 1
La définition de 'padding' dans cette spécification.
Recommendation Définition initiale.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments exceptés table-row-group, table-header-group, table-footer-group, table-row, table-column-group et table-column. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Pourcentagesse rapporte à la largeur du bloc contenant
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
  • padding-bottom: le pourcentage tel que spécifé ou une longeur absolue
  • padding-left: le pourcentage tel que spécifé ou une longeur absolue
  • padding-right: le pourcentage tel que spécifé ou une longeur absolue
  • padding-top: le pourcentage tel que spécifé ou une longeur absolue
Type d'animationune longueur

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi