Propriété de rembourrage CSS
Exemple
Définissez le rembourrage des quatre côtés d'un élément <p> sur 35 pixels :
p {
padding: 35px;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
Le rembourrage d'un élément est l'espace entre son contenu et sa bordure.
La paddingpropriété est une propriété abrégée pour :
Remarque : le rembourrage crée un espace supplémentaire dans un élément, tandis que la marge crée un espace supplémentaire autour d'un élément.
Cette propriété peut avoir de une à quatre valeurs.
Si la propriété padding a quatre valeurs :
- rembourrage : 10px 5px 15px 20px ;
- le rembourrage supérieur est de 10px
- le rembourrage droit est de 5px
- le rembourrage inférieur est de 15px
- le rembourrage gauche est de 20px
Si la propriété padding a trois valeurs :
- rembourrage : 10px 5px 15px ;
- le rembourrage supérieur est de 10px
- le rembourrage droit et gauche est de 5px
- le rembourrage inférieur est de 15px
Si la propriété padding a deux valeurs :
- rembourrage : 10px 5px ;
- le rembourrage supérieur et inférieur est de 10px
- le rembourrage droit et gauche est de 5px
Si la propriété padding a une valeur :
- rembourrage : 10 px ;
- les quatre rembourrages sont de 10px
Remarque : Les valeurs négatives ne sont pas autorisées.
| Valeur par défaut: | 0 |
|---|---|
| Hérité: | non |
| Animable : | oui, voir propriétés individuelles . En savoir plus sur l'animation |
| Version: | CSS1 |
| Syntaxe JavaScript : | objet .style.padding="100px 20px" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
| Property | |||||
|---|---|---|---|---|---|
| padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Syntaxe CSS
padding: length|initial|inherit;
Valeurs de propriété
| Value | Description | Play it |
|---|---|---|
| length | Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units | |
| % | Specifies the padding in percent of the width of the containing element | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Définissez le rembourrage d'un élément <p> sur 35 pixels pour le haut et le bas, et sur 70 pixels pour la droite et la gauche :
p {
padding: 35px 70px;
}
Exemple
Définissez le rembourrage d'un élément <p> sur 35 pixels pour le haut, 70 pixels pour la droite et la gauche et sur 50 pixels pour le bas :
p {
padding: 35px 70px 50px;
}
Exemple
Définissez le remplissage d'un élément <p> sur 35 pixels pour le haut, 70 pixels pour la droite, 50 pixels pour le bas et 90 pixels pour la gauche :
p {
padding: 35px 70px 50px 90px;
}
Pages connexes
Tutoriel CSS : Remplissage CSS
Tutoriel CSS : Modèle de boîte CSS
Référence HTML DOM : propriété padding