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.

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 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.
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
Type d'animationune longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB, ThePrisoner
Dernière mise à jour par : SphinxKnight,