padding

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Exemple interactif

padding: 1em;

padding: 10% 0;

padding: 10px 50px 20px;

padding: 10px 50px 30px 0;

padding: 0;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
}

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

css
/* 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.

Définition formelle

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écifié ou une longueur absolue
  • padding-left: le pourcentage tel que spécifié ou une longueur absolue
  • padding-right: le pourcentage tel que spécifié ou une longueur absolue
  • padding-top: le pourcentage tel que spécifié ou une longueur absolue
Type d'animationune longueur

Syntaxe formelle

padding = 
  <'padding-top'>{1,4}  

<padding-top> = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

Exemples

HTML

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

CSS

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

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

Résultat

Spécifications

Specification
CSS Box Model Module Level 3
# padding-shorthand

Compatibilité des navigateurs

Voir aussi