CSS Remplissage

Les paddingpropriétés 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 remplissage de chaque côté d’un élément (en haut, à droite, en bas et à gauche).

Rembourrage – côtés individuels

CSS a des propriétés pour spécifier le remplissage pour chaque côté d’un élément:

• padding-top
• padding-right
• padding-bottom
• padding-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 remplissage en% de la largeur de l’élément contenant
• hériter – spécifie que le remplissage doit être hérité de l’élément parent

Remarque: les valeurs négatives ne sont pas autorisées.

Exemple

Définissez un remplissage 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;
}

Essayez-le vous-même

Rembourrage – propriété sténographique

Pour raccourcir le code, il est possible de spécifier toutes les propriétés de remplissage dans une propriété.

La paddingpropriété est une propriété abrégée des propriétés de remplissage individuelles suivantes:

• padding-top
• padding-right
• padding-bottom
• padding-left

Alors, voici comment cela fonctionne:

Si la paddingpropriété a quatre valeurs:

• rembourrage: 25px 50px 75px 100px;
  • le rembourrage supérieur est de 25 pixels
  • le rembourrage droit est de 50 pixels
  • le rembourrage inférieur est de 75 pixels
  • le rembourrage gauche est de 100 pixels

Exemple

Utilisez la propriété de raccourci de remplissage avec quatre valeurs:

div {
  padding: 25px 50px 75px 100px;
}

Essayez-le vous-même

Si la paddingpropriété a trois valeurs:

• rembourrage: 25px 50px 75px;
  • le rembourrage supérieur est de 25 pixels
  • les rembourrages droit et gauche sont 50px
  • le rembourrage inférieur est de 75 pixels

Exemple

Utilisez la propriété de raccourci de remplissage avec trois valeurs:

div {
  padding: 25px 50px 75px;
}

Essayez-le vous-même

Si la paddingpropriété a deux valeurs:

• rembourrage: 25px 50px;
  • les rembourrages supérieur et inférieur sont de 25 pixels
  • les rembourrages droit et gauche sont 50px

Exemple

Utilisez la propriété de raccourci de remplissage avec deux valeurs:

div {
  padding: 25px 50px;
}

Essayez-le vous-même

Si la paddingpropriété a une valeur:

• rembourrage: 25px;
  • les quatre rembourrages sont 25px

Exemple

Utilisez la propriété de raccourci de remplissage avec une valeur:

div {
  padding: 25px;
}

Essayez-le vous-même

Rembourrage et largeur des éléments

La widthpropriété CSS spécifie la largeur de la zone de contenu de l’élément. La zone de contenu est la partie à l’intérieur du remplissage, 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 remplissage 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> reçoit une largeur de 300 pixels. Cependant, la largeur réelle de l’élément <div> sera de 350 pixels (300 pixels + 25 pixels de remplissage gauche + 25 pixels de remplissage droit):

div {
  width: 300px;
  padding: 25px;
}

Essayez-le vous-même

Pour conserver la largeur à 300 pixels, quelle que soit la quantité de rembourrage, vous pouvez utiliser la box-sizingpropriété. Cela fait que l’élément conserve sa largeur; si vous augmentez le remplissage, 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;
}

Essayez-le vous-même

Plus d’exemples

Définir le remplissage gauche
Cet exemple montre comment définir le remplissage gauche d’un élément <p>.

Définir le remplissage droit
Cet exemple montre comment définir le remplissage droit d’un élément <p>.

Définir le remplissage supérieur
Cet exemple montre comment définir le remplissage supérieur d’un élément <p>.

Définir le remplissage inférieur
Cet exemple montre comment définir le remplissage inférieur d’un élément <p>.

Toutes les propriétés de remplissage CSS

Property	Description
padding	Une propriété abrégée pour définir toutes les propriétés de remplissage dans une seule déclaration
padding-bottom	Définit le remplissage inférieur d’un élément
padding-left	Définit le remplissage gauche d’un élément
padding-right	Définit le remplissage droit d’un élément
padding-top	Définit le rembourrage supérieur d’un élément