padding
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété raccourcie CSS padding définit la zone de remplissage sur les quatre côtés d'un élément en une seule fois.
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">
Loin dans les régions inexplorées de l'extrémité démodée du bras spiral
occidental de la Galaxie se trouve un petit soleil jaune négligé.
</div>
</div>
</section>
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
}
La zone de remplissage d'un élément correspond à l'espace entre son contenu et sa bordure.
Note :
Le remplissage crée un espace supplémentaire à l'intérieur d'un élément. En revanche, la marge (margin) crée un espace supplémentaire autour d'un élément.
Propriétés constitutives
Cette propriété est un raccourci pour les propriétés CSS suivantes :
Syntaxe
/* Appliqué 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: revert;
padding: revert-layer;
padding: unset;
La propriété padding peut être définie en utilisant une, deux, trois ou quatre valeurs. Chaque valeur est une longueur (<length>) ou un pourcentage (<percentage>). Les valeurs négatives ne sont pas autorisées.
- Lorsque une valeur est définie, elle s'applique à tous les côtés.
- Lorsque deux valeurs sont définies, la première s'applique au haut et au bas, la seconde au gauche et à droite.
- Lorsque trois valeurs sont définies, la première s'applique au haut, la seconde au droite et gauche, la troisième au bas.
- Lorsque quatre valeurs sont définies, elles s'appliquent respectivement au haut, droite, bas et gauche (dans le sens des aiguilles d'une montre).
Valeurs
<length>-
La taille du remplissage en tant que valeur fixe.
<percentage>-
La taille du remplissage en pourcentage, relative à la taille en ligne (largeur dans une langue horizontale, définie par
writing-mode) du bloc englobant.
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
Définir le remplissage avec des pixels
HTML
<h4>Cet élément a un remplissage modéré.</h4>
<h3>Le remplissage est énorme dans cet élément !</h3>
CSS
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
Résultat
Définir le remplissage avec des pixels et des pourcentages
padding: 5%; /* Tous les côtés : 5 % de remplissage */
padding: 10px; /* Tous les côtés : 10px de remplissage */
padding: 10px 20px; /* haut et bas : 10px de remplissage */
/* gauche et droite : 20px de remplissage */
padding: 10px 3% 20px; /* haut : 10px de remplissage */
/* gauche et droite : 3 % de remplissage */
/* bas : 20px de remplissage */
padding: 1em 3px 30px 5px; /* haut : 1em de remplissage */
/* droite : 3px de remplissage */
/* bas : 30px de remplissage */
/* gauche : 5px de remplissage */
Spécifications
| Spécification |
|---|
| CSS Box Model Module Level 3 # padding-shorthand |
Compatibilité des navigateurs
Voir aussi
- Les propriétés
padding-top,padding-right,padding-bottometpadding-left - Les propriétés
padding-block-start,padding-block-end,padding-inline-startetpadding-inline-end - Les propriétés raccourcies
padding-blocketpadding-inline - Le guide d'introduction au modèle de boîte CSS
- Le module du modèle de boîte CSS