Le remplissage CSS est l'une des propriétés du Modèle de boîte CSS. Cette propriété abrégée définit le remplissage autour des quatre côtés d'un élément HTML. Le remplissage CSS peut être appliqué à presque tous les balise HTML (à l'exception de certaines balises de table). De plus, les quatre côtés de l'élément peuvent avoir une valeur différente.
Propriété de remplissage CSS
Pour utiliser la propriété raccourcie de remplissage CSS, vous pouvez utiliser le mnémonique « TRouBLe » (ou « TRiBbLe » pour les fans de Star Trek). Cela représente Haut, droite, bas, et la gauche, et il fait référence à l'ordre des largeurs de remplissage que vous définissez dans la propriété abrégée. Par example:
rembourrage: en haut à droite en bas à gauche ;
rembourrage: 1px 2px 3px 6px;
Si vous utilisiez les valeurs répertoriées ci-dessus, cela appliquerait une valeur de remplissage différente à chaque côté de l'élément HTML auquel vous l'appliquez. Si vous souhaitez appliquer le même rembourrage sur les quatre côtés, vous pouvez simplifier votre CSS et écrivez juste une valeur:
rembourrage: 12px ;
Avec cette ligne de CSS, 12 pixels de remplissage s'appliqueraient aux 4 côtés de l'élément.
Si vous souhaitez que le remplissage soit le même pour le haut et le bas et la gauche et la droite, vous pouvez écrire deux valeurs:
rembourrage: 24px 48px ;
La première valeur (24px) s'appliquerait en haut et en bas, tandis que la seconde s'appliquerait à gauche et à droite.
Si vous écrivez trois valeurs, cela rendra le rembourrage horizontal (gauche et droite) le même, tout en changeant le haut et le bas:
rembourrage: en haut à droite et en bas à gauche ;
remplissage: 0px 1px 3px ;
Selon le modèle de boîte CSS, le remplissage est le plus proche de l'élément/contenu lui-même. Cela signifie que le remplissage est ajouté à un élément entre la largeur ou la hauteur du contenu et toutes les valeurs de bordure que vous utilisez. Si le remplissage est défini sur zéro, il a le même bord que le contenu.
Valeurs de remplissage CSS
Le remplissage CSS peut prendre n'importe quelle valeur de longueur non négative. Assurez-vous de spécifier la mesure, telle que px ou em. Vous pouvez également spécifier un pourcentage pour votre remplissage, qui sera un pourcentage de la largeur du bloc conteneur de l'élément. Cela comprend le rembourrage supérieur et inférieur. Par example:
#conteneur { largeur: 800px; hauteur: 200px; }
#conteneur p { largeur: 400px; hauteur: 75 %; rembourrage: 25 % 0; }
le la taille du paragraphe à l'intérieur du #récipient l'élément sera de 75 % de la #récipient's hauteur plus 25 % de la largeur pour le rembourrage supérieur et 25 % de la largeur pour le rembourrage inférieur. Cela fait 300 + 200 + 200 = 700px.
Effets de l'ajout de remplissage CSS
Au éléments de niveau bloc, le rembourrage est appliqué sur les quatre côtés. Étant donné que l'élément est déjà un bloc ou une boîte, le remplissage est appliqué aux côtés de la boîte.
Lorsque le remplissage CSS est ajouté à éléments en ligne, il peut y avoir un certain chevauchement d'éléments au-dessus et au-dessous de l'élément en ligne si le remplissage vertical dépasse la hauteur de ligne, mais cela ne poussera pas la hauteur de ligne vers le bas. Le remplissage CSS horizontal appliqué aux éléments en ligne sera ajouté au début de l'élément et à la fin de l'élément. Et le rembourrage peut envelopper les lignes. Mais cela ne s'appliquera pas à toutes les lignes d'un élément multiligne, vous ne pouvez donc pas utiliser le remplissage pour indenter un segment de contenu multiligne.
De plus, dans CSS2.1, vous ne pouvez pas créer de blocs conteneurs où la largeur dépend d'un élément avec des pourcentages pour les largeurs (ou les largeurs de remplissage). Si vous le faites, le résultat est indéfini. Les navigateurs afficheront toujours le contenu, mais vous n'obtiendrez peut-être pas les résultats que vous attendez. Si vous y réfléchissez, cela a du sens, comme si votre élément conteneur avait besoin de connaître la largeur de ses éléments enfants afin de définir sa largeur - comme lorsqu'il n'a pas de largeur prédéfinie et qu'un ou plusieurs ont une largeur définie en pourcentage de l'élément conteneur, cela crée une chaîne circulaire sans répondre. Si vous utilisez des pourcentages pour les largeurs de quoi que ce soit sur votre document, vous devez vous assurer que les largeurs des éléments parents sont également définies.