Pourquoi les images de blocs en ligne ont-elles un espace supplémentaire en dessous et comment puis-je y remédier ?

Espace mystérieux sous les images : dévoiler la cause et la solution

Lors de l'affichage d'images sous forme d'éléments de bloc en ligne, vous pouvez rencontrer un scénario déroutant où un espace vacant apparaît en dessous d'eux, malgré la définition du remplissage et de la marge à zéro. Ce phénomène déroutant découle du comportement inhérent des éléments de bloc en ligne, qui ressemblent à des caractères dans le texte.

Tout comme les lettres ont des lignes de base désignant la ligne inférieure des caractères, les images s'alignent sur cette ligne de base. Par conséquent, même en l'absence de texte d'accompagnement, l'image s'aligne sur la ligne de base, provoquant un espace en dessous en raison de l'espace réservé pour accrocher les queues des lettres comme « p » et « q ».

Pour remédier à cela, nous pouvons exploiter la puissance de vertical-align:bottom. Cette propriété CSS ancre l'image au bas de la ligne, supprimant ainsi les espaces persistants.

img {
    vertical-align:bottom;
}

Pour les images plus petites que la hauteur de la ligne, un ajustement subtil est nécessaire. L'introduction de line-height:1px dans l'élément conteneur bannit toute intrusion potentielle d'espace au-dessus de l'image.

L'adoption de ces ajustements simples garantit que les images se nichent parfaitement dans l'espace qui leur est alloué, sans la présence énigmatique de zones vides en dessous d'elles.

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!