Pourquoi y a-t-il un espace inattendu sous mes images, même avec un remplissage et une marge nuls ?

Espacement inattendu sous les images : causes et résolution

Malgré l'application de valeurs de remplissage et de marge de zéro, les images affichent inexplicablement un espace vide en dessous d'elles. Ce problème déroutant découle du comportement inhérent des images, qui sont traitées comme des caractères dans des éléments de bloc en ligne.

En tant que caractères, les images s'alignent sur la ligne de base, une ligne établie pour les caractères de texte afin de maintenir la cohérence. Cependant, des lettres spécifiques comme « q » et « j » possèdent des descendants qui s'étendent en dessous de la ligne de base. Pour éviter les collisions avec les lignes suivantes, un espace est réservé sous la ligne de base.

Ce diagramme illustre les différentes lignes régissant l'alignement du texte :

[Insérer le diagramme de base de WHATWG]

Par conséquent , les images s'alignent sur la ligne de base même en l'absence de texte. Pour remédier à cette situation, un simple ajustement CSS peut être mis en œuvre :

img {
  vertical-align: bottom;
}

Cette modification aligne l'image en bas de ligne, éliminant l'espace mystérieux. Cependant, lorsqu'il s'agit d'images de petite taille (plus courtes que la hauteur de la ligne), un espace supplémentaire peut apparaître au-dessus de l'image. Pour résoudre ce problème, attribuez line-height: 1px; à l'élément conteneur.

Cette explication et solution complètes devraient répondre aux préoccupations de nombreuses personnes qui ont rencontré des problèmes similaires.

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!