Pourquoi les images ont-elles un remplissage inférieur inattendu même avec des marges et un remplissage nuls ?

Comprendre le remplissage mystérieux sous les images

Pourquoi les images ont-elles souvent un espace vide inexpliqué en dessous, même lorsque le remplissage et les marges sont définis sur zéro ?

Explication

Images sont traités comme des éléments de bloc en ligne, similaires aux caractères du texte. Ils adhèrent à la règle de la ligne de base, qui est une ligne qui traverse le bas de la plupart des lettres. Cependant, certaines lettres comme « p » et « q » ont des descendants qui s'étendent en dessous de la ligne de base. Pour éviter que ces descendants n'entrent en conflit avec les lignes suivantes, un espace est réservé sous la ligne de base.

Les images sont alignées sur cette ligne de base, ce qui entraîne un espace supplémentaire en bas même en l'absence de texte.

Solution

Pour résoudre ce problème, appliquez la propriété CSS vertical-align: bottom à l'image. Cela alignera l'image au bas de la ligne, éliminant ainsi le mystérieux remplissage.

Attention

Bien que cette solution résolve le problème de remplissage, elle peut en créer un autre si le l'image est plus petite que la hauteur de la ligne. Dans de tels cas, un espace supplémentaire peut apparaître au-dessus de l'image. Pour remédier à cela, ajoutez line-height: 1px à l'élément conteneur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!