padding

La propriété padding permet de définir les différents écarts de remplissage d'un élément, sur l'ensemble de ses côtés. 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.

La propriété padding est une propriété raccourcie pour éviter d'avoir à définir chacun des côtés séparément. Cette propriété synthétise padding-top, padding-right, padding-bottom, padding-left.

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.
Héritéenon
Pourcentagesse rapporte à la largeur du bloc contenant
Médiavisuel
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
Animableoui, comme une longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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: 2px 1em 0 1em;

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

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.

Selon la quantité de valeurs utilisées, on a un effet différent :

  • 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.

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.
Version de travail Aucun changement.
CSS Level 2 (Revision 1)
La définition de 'padding-top' dans cette spécification.
Recommendation Aucun changement.
CSS Level 1
La définition de 'padding' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? ? ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB, the prisoner
 Dernière mise à jour par : SphinxKnight,