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
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. Voir la page
<percentage>
pour plus d'informations sur les valeurs de ce type.
Définition formelle
Valeur initiale | pour 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ée | non |
Pourcentages | se rapporte à la largeur du bloc contenant |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | une longueur |
Syntaxe formelle
padding =
<'padding-top'>{1,4}
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
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
Specification |
---|
CSS Box Model Module Level 3 # padding-shorthand |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
-
Les quatres propriétés détaillées synthétisées par
padding
: