Rembourrage - Astuces CSS | CSS Almanach 2025

La paddingpropriété en CSS définit la partie la plus interne du modèle de boîte, créant un espace autour du contenu d'un élément, à l'intérieur de toutes les marges et / ou bordures définies.

Les valeurs de remplissage sont définies à l'aide de longueurs ou de pourcentages et ne peuvent pas accepter de valeurs négatives. La valeur initiale, ou par défaut, de toutes les propriétés de remplissage est 0.

Voici un exemple simple:

.box ( padding: 0 1.5em 0 1.5em; )

L'exemple ci-dessus utilise la paddingpropriété abrégée, qui accepte jusqu'à quatre valeurs, illustrées ici:

.box ( padding: || || || )

Si moins de quatre valeurs sont définies, les valeurs manquantes sont supposées en fonction de celles définies. Par exemple, les deux ensembles de règles suivants obtiendraient des résultats identiques:

.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )

Ainsi, si une seule valeur est définie, cela définit les quatre propriétés de remplissage sur la même valeur:

.box ( padding: 20px; )

Si trois valeurs sont déclarées, c'est le cas padding: (top) (left-and-right) (bottom);.

Toutes les propriétés de remplissage individuelles peuvent être déclarées à l'aide de la longue main, auquel cas vous ne définiriez qu'une seule valeur par propriété. Ainsi, l'exemple précédent pourrait être réécrit comme suit:

.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )

Calculs de remplissage et de largeur d'élément

Si un élément a une largeur spécifiée, tout remplissage ajouté à cet élément s'ajoutera à la largeur totale de l'élément. Ceci est souvent un résultat indésirable, car il nécessite que la largeur d'un élément soit recalculée chaque fois que le remplissage est ajusté. (Notez que cela se produit également avec la hauteur, mais dans la plupart des cas, il est préférable de ne pas donner à un élément une hauteur définie.)

Par exemple:

.box ( padding: 20px; width: 400px; )

Dans cet exemple, bien que l' .boxélément ait une largeur explicite de 400 px, la largeur réelle rendue de l'élément sur la page sera de 440 px. Cela prend en compte non seulement la largeur de 400px, mais également les 20px de remplissage à gauche et les 20px de remplissage à droite (définis avec le raccourci padding dans l'exemple précédent).

Cela se produit afin de conserver 400 px d'espace de contenu, plutôt que 400 px de largeur totale de l'élément. Voici un stylo démontrant ceci:

Découvrez ce stylo!

Cela se produit dans tous les navigateurs en cours d'utilisation, en mode standard, mais ne se produira pas dans IE6 et IE7 en mode quirks (c'est-à-dire sur les pages affichées dans IE6 ou IE7 où il n'y a pas de doctype déclaré ou où quelque chose d'autre se produit pour déclencher des bizarreries mode).

Pour résoudre ce problème, en conservant ainsi la largeur à 400 px quelle que soit la quantité de remplissage, vous pouvez utiliser la box-sizingpropriété:

.box ( padding: 20px; width: 400px; box-sizing: border-box; )

Cela amène l'élément à conserver sa largeur tout en augmentant le remplissage, diminuant ainsi l'espace de contenu disponible. Voici une démonstration: