CSS Rembourrage
Rembourrage CSS
Les propriétés de rembourrage CSS sont utilisées pour générer de l'espace autour du contenu d'un élément, à l'intérieur de toutes les bordures définies.
Avec CSS, vous avez un contrôle total sur le rembourrage. Il existe des propriétés pour définir le rembourrage de chaque côté d'un élément (haut, droite, bas et gauche), ainsi qu'une propriété abrégée pour définir toutes les propriétés de rembourrage en une seule déclaration.
Rembourrage - Côtés Individuels
CSS dispose de propriétés pour spécifier le rembourrage de chaque côté d'un élément :
-
padding-top- définit le rembourrage supérieur d'un élément -
padding-right- définit le rembourrage droit d'un élément -
padding-bottom- définit le rembourrage inférieur d'un élément -
padding-left- définit le rembourrage gauche d'un élément
Toutes les propriétés de rembourrage 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 conteneur
- inherit - 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éfinir 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;
} Rembourrage - Propriété Abrégée
Pour raccourcir le code, il est possible de spécifier toutes les propriétés de rembourrage en une seule déclaration.
La propriété padding est une propriété abrégée pour les propriétés de rembourrage individuelles suivantes :
Voici comment cela fonctionne :
Si la propriété padding a quatre valeurs :
- padding: 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é abrégée de rembourrage avec quatre valeurs :
div {
padding: 25px 50px 75px 100px;
} Si la propriété padding a trois valeurs :
- padding: 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é abrégée de rembourrage avec trois valeurs :
div {
padding: 25px 50px 75px;
} Si la propriété padding a deux valeurs :
- padding: 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é abrégée de rembourrage avec deux valeurs :
div {
padding: 25px 50px;
} Si la propriété padding a une valeur :
- padding: 25px;
- tous les quatre rembourrages sont de 25px
Exemple
Utilisez la propriété abrégée de rembourrage avec une valeur :
div {
padding: 25px;
} Rembourrage et Largeur de l'Élément
La propriété CSS width spécifie la largeur de la zone de contenu de l'élément. La zone de contenu est la portion à 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 inclus dans la largeur totale de l'élément. Cela peut souvent être 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;
} Rembourrage et box-sizing
La propriété box-sizing définit comment la largeur et la hauteur d'un élément sont calculées : doivent-elles inclure le rembourrage et les bordures, ou non.
La propriété box-sizing peut avoir les valeurs suivantes :
-
content-box- C'est la valeur par défaut. Les propriétés de largeur et de hauteur incluent uniquement le contenu (la bordure et le rembourrage ne sont pas inclus) -
border-box- Les propriétés de largeur et de hauteur incluent le contenu, le rembourrage et la bordure
Ainsi, pour garder la largeur à 300px, peu importe la quantité de rembourrage, vous pouvez utiliser box-sizing: border-box; . Cela permet à l'élément de maintenir sa largeur réelle ; si vous augmentez le rembourrage, l'espace disponible pour le contenu diminuera.
Exemple
Utilisez la propriété box-sizing pour garder la largeur à 300px, peu importe la quantité de rembourrage :
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
} Plus d'Exemples
Définir la propriété de rembourrage gauche
Cet exemple montre comment définir le rembourrage gauche d'un élément <p>.
Définir la propriété de rembourrage droit
Cet exemple montre comment définir le rembourrage droit d'un élément <p>.
Définir la propriété de rembourrage supérieur
Cet exemple montre comment définir le rembourrage supérieur d'un élément <p>.
Définir la propriété de rembourrage inférieur
Cet exemple montre comment définir le rembourrage inférieur d'un élément <p>.
Toutes les Propriétés de Rembourrage CSS
| Propriété | Description |
|---|---|
| padding | Une propriété abrégée pour définir toutes les propriétés de rembourrage en une seule déclaration |
| padding-bottom | Définit le rembourrage inférieur d'un élément |
| padding-left | Définit le rembourrage gauche d'un élément |
| padding-right | Définit le rembourrage droit d'un élément |
| padding-top | Définit le rembourrage supérieur d'un élément |