Pourquoi y a-t-il de l'espace sous mon image de bloc en ligne et comment puis-je y remédier ?

Résolution de l'espace sous les images de blocs en ligne

Dans votre exemple de code, vous tentez d'afficher une image en ligne avec le texte à l'aide de l'affichage : propriété inline-block, mais remarquez un espace indésirable sous l'image. Pour résoudre ce problème, examinons les causes et trouvons une solution complète.

Le saut de ligne qui suit l'élément image crée l'espace, car les éléments en ligne réservent naturellement de l'espace en dessous d'eux pour un contenu textuel potentiel. Comme l'image n'a aucun contenu textuel, cet espace reste inoccupé et apparaît comme un espace non désiré.

Pour éliminer cet espace, nous devons éliminer le saut de ligne. Une façon d'y parvenir consiste à définir la propriété vertical-align sur top pour l'image. Cela alignera verticalement le haut de l'image avec la ligne de base du texte environnant.

<code class="CSS">img {
    display: inline-block; 
    margin: 0;
    vertical-align: top;
}</code>

Avec cet ajustement, l'espace situé sous l'image disparaît, permettant à l'image de s'aligner avec le contenu environnant. Vous pouvez le vérifier en modifiant votre code dans le violon fourni : http://jsfiddle.net/dJVxb/4/.

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!