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.
Rembourrage CSS
Les propriétés CSS paddingsont 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
Remarque : 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> :
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
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é.
La paddingproprié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 paddingproprié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 {
padding: 25px 50px 75px 100px;
}
Si la paddingproprié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 {
padding: 25px 50px 75px;
}
Si la paddingproprié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 {
padding: 25px 50px;
}
Si la paddingpropriété a une valeur :
- rembourrage : 25px ;
- les quatre rembourrages sont de 25px
Exemple
Utilisez la propriété raccourcie padding avec une seule valeur :
div {
padding: 25px;
}
Remplissage et largeur d'élément
La propriété CSS widthspé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> a une largeur de 300px. Cependant, la largeur réelle de l'élément <div> sera de 350px (300px + 25px de rembourrage gauche + 25px de rembourrage droit) :
div {
width: 300px;
padding: 25px;
}
Pour conserver la largeur à 300 pixels, quelle que soit la quantité de rembourrage, vous pouvez utiliser la
box-sizingpropriété. Ainsi, l'élément conserve sa largeur réelle ; si vous augmentez le rembourrage, l'espace de contenu disponible diminuera.
Exemple
Utilisez la propriété box-sizing pour conserver la largeur à 300 pixels, quelle que soit la quantité de rembourrage :
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Plus d'exemples
Cet exemple montre comment définir le remplissage gauche d'un élément <p>.
Cet exemple montre comment définir le bon rembourrage d'un élément <p>.
Cet exemple montre comment définir le rembourrage supérieur d'un élément <p>.
Cet exemple montre comment définir le remplissage inférieur d'un élément <p>.
Toutes les propriétés de rembourrage CSS
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |