CSS padding (remplissage)
En CSS, la propriété raccourcie padding définit l'espace entre la bordure d'un élément et son contenu, c'est-à-dire le padding en haut, à droite, en bas et à gauche.
padding (remplissage)
Lorsque le padding d'un élément est effacé, la zone libérée est remplie avec la couleur d'arrière-plan de l'élément.
L'utilisation de la propriété padding seule peut modifier le padding sur les quatre côtés.
valeurs possibles
| Valeur | Description |
|---|---|
| longueur | Définit un padding fixe (pixels, pt, em, etc.) |
| % | Définit un padding à l'aide de valeurs en pourcentage |
Padding - propriétés de padding d'un seul côté
En CSS, il est possible de spécifier un padding différent pour chaque côté :
Exemple
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
Essayez-le vous-même »
- Le padding supérieur est de 25px
- Le padding droit est de 50px
- Le padding inférieur est de 25px
- Le padding gauche est de 50px
Padding - propriétés raccourcies
Pour raccourcir le code, il est possible de spécifier toutes les propriétés de padding en une seule propriété.
Cela s'appelle une propriété raccourcie. La propriété raccourcie pour toutes les propriétés de padding est :padding :
La propriété padding peut prendre entre une et quatre valeurs.
padding:25px 50px 75px 100px;
- Le padding supérieur est de 25px
- Le padding droit est de 50px
- Le padding inférieur est de 75px
- Le padding gauche est de 100px
padding:25px 50px 75px;
- Le padding supérieur est de 25px
- Le padding gauche et le padding droit sont de 50px
- Le padding inférieur est de 75px
padding:25px 50px;
- Le padding haut et le padding bas sont de 25px
- Le padding gauche et le padding droit sont de 50px
padding:25px;
- Tout le padding est de 25px
Plus d’exemples
Toutes les propriétés padding en une seule déclaration
Cet exemple montre comment utiliser la propriété raccourcie pour définir toutes les propriétés de padding en une seule déclaration, qui peut avoir de une à quatre valeurs.
Définir le padding gauche
Cet exemple montre comment définir le padding gauche d'un élément.
Définir le padding droit
Cet exemple montre comment définir le padding droit d'un élément.
Définir le padding haut
Cet exemple montre comment définir le padding supérieur d'un élément.
Définir le padding inférieur
Cet exemple montre comment définir le padding inférieur d'un élément.
Toutes les propriétés CSS de padding
| Propriété | Description |
|---|---|
| padding | Utilisez la propriété raccourcie pour définir toutes les propriétés de padding en une seule déclaration. |
| padding-bottom | Définir le padding inférieur de l'élément. |
| padding-left | Définit le padding gauche d'un élément |
| padding-right | Définit le padding droit d'un élément |
| padding-top | Définir le padding supérieur de l'élément. |