Rembourrage CSS
Le rembourrage est utilisé pour créer de l’espace autour du contenu d’un élément, à l’intérieur de toute bordure définie.
Cet élément a un rembourrage de 70px.
Essayez-le vous-même »
Rembourrage CSS
Le CSS padding Les propriétés sont utilisées pour générer de l’espace autour du contenu d’un élément, à l’intérieur de toute bordure définie.
Avec CSS, vous avez un contrôle total sur le rembourrage. Il existe des propriétés permettant de définir le rembourrage pour chaque côté d’un élément (haut, droite, bas et gauche).
Rembourrage – Côtés individuels
CSS a des propriétés pour spécifier le rembourrage pour chaque côté d’un élément :
padding-toppadding-rightpadding-bottompadding-left
Toutes les propriétés de remplissage peuvent avoir les valeurs suivantes :
- longueur – spécifie un rembourrage en px, pt, cm, etc.
- % – spécifie un rembourrage en % de la largeur de l’élément contenant
- hériter – spécifie que le rembourrage doit être hérité de l’élément parent
Note: Les valeurs négatives ne sont pas autorisées.
Exemple
Définissez un rembourrage différent pour les quatre côtés d’un élément
div {
rembourrage supérieur : 50 px ;
rembourrage à droite : 30 px ;
rembourrage en bas : 50px ;
rembourrage à gauche : 80px ;
}
Essayez-le vous-même »
Remplissage – Propriété abrégée
Pour raccourcir le code, il est possible de spécifier toutes les propriétés de remplissage dans une seule propriété.
Le padding propriété est une propriété abrégée pour les propriétés de remplissage individuelles suivantes :
padding-toppadding-rightpadding-bottompadding-left
Alors, voici comment cela fonctionne :
Si la padding propriété a quatre valeurs :
- rembourrage : 25px 50px 75px 100px ;
- le rembourrage supérieur est de 25px
- le rembourrage droit est de 50px
- le rembourrage inférieur est de 75px
- le rembourrage gauche est de 100px
Exemple
Utilisez la propriété raccourcie padding avec quatre valeurs :
div {
rembourrage : 25px 50px 75px 100px ;
}
Essayez-le vous-même »
Si la padding propriété a trois valeurs :
- rembourrage : 25px 50px 75px ;
- le rembourrage supérieur est de 25px
- les rembourrages droit et gauche sont de 50px
- le rembourrage inférieur est de 75px
Exemple
Utilisez la propriété raccourcie padding avec trois valeurs :
div {
rembourrage : 25px 50px 75px ;
}
Essayez-le vous-même »
Si la padding propriété a deux valeurs :
- rembourrage : 25px 50px ;
- les rembourrages supérieur et inférieur sont de 25px
- les rembourrages droit et gauche sont de 50px
Exemple
Utilisez la propriété raccourcie padding avec deux valeurs :
div {
rembourrage : 25px 50px ;
}
Essayez-le vous-même »
Si la padding propriété a une valeur :
- rembourrage : 25px ;
- les quatre rembourrages sont de 25px
Exemple
Utilisez la propriété raccourcie padding avec une seule valeur :
div {
rembourrage : 25px ;
}
Essayez-le vous-même »
Remplissage et largeur d’élément
Le CSS width propriété spécifie la largeur de la zone de contenu de l’élément. La zone de contenu est la partie à l’intérieur du rembourrage, de la bordure et de la marge d’un élément (le modèle de boîte).
Ainsi, si un élément a une largeur spécifiée, le rembourrage ajouté à cet élément sera ajouté à la largeur totale de l’élément. C’est souvent un résultat indésirable.
Exemple
Ici, l’élément
div {
largeur : 300 pixels ;
rembourrage : 25px ;
}
Essayez-le vous-même »
Pour conserver la largeur à 300px, peu importe la quantité de rembourrage, vous pouvez utiliser le
box-sizing
Exemple
Utilisez la propriété box-sizing pour conserver la largeur à 300 pixels, quelle que soit la quantité de rembourrage :
div {
largeur : 300 pixels ;
rembourrage : 25px ;
dimensionnement de la boîte : border-box ;
}
Essayez-le vous-même »
Plus d’exemples
Définir le rembourrage gauche
Cet exemple montre comment définir le remplissage gauche d’un élément
.
Définir le bon rembourrage
Cet exemple montre comment définir le bon rembourrage d’un élément
.
Définir le rembourrage supérieur
Cet exemple montre comment définir le rembourrage supérieur d’un élément
.
Définir le rembourrage inférieur
Cet exemple montre comment définir le remplissage inférieur d’un élément
.
Toutes les propriétés de rembourrage CSS
| Propriété | Description |
|---|---|
| rembourrage | Une propriété abrégée pour définir toutes les propriétés de remplissage dans une seule déclaration |
| fond de rembourrage | Définit le rembourrage inférieur d’un élément |
| rembourrage gauche | Définit le rembourrage gauche d’un élément |
| rembourrage à droite | Définit le bon rembourrage d’un élément |
| rembourrage | Définit le rembourrage supérieur d’un élément |
#Rembourrage #CSS