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.

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

Compatibilité des navigateurs

Voir aussi

• CSS : Le modèle de boîtes