We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple112143.51
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui4 Oui Oui Oui

Voir aussi

Étiquettes et contributeurs liés au document

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