Pourquoi l'espacement vertical apparaît-il sous les images de blocs en ligne et comment peut-il être corrigé ?

Élimination de l'espacement vertical sous les images de blocs en ligne

Dans le développement Web, les éléments de blocs en ligne sont couramment utilisés pour aligner les images. Cependant, les utilisateurs rencontrent souvent un espacement vertical indésirable sous ces images. Pourquoi cela se produit-il et comment pouvons-nous le résoudre ?

Dans l'exemple fourni dans la question, une image est placée dans un wrapper de couleur verte (div). Lorsqu'elle est affichée sous forme de bloc en ligne, l'image apparaît au bas du wrapper, laissant un espace vide au-dessus. Pour éliminer ce problème tout en conservant l'affichage des blocs en ligne, nous devons ajuster l'alignement vertical de l'image.

La solution réside dans l'ajout de la propriété CSS :

<code class="css">vertical-align: top;</code>

Cette propriété aligne la ligne de base verticale de l'image avec le haut de la ligne sur laquelle elle se trouve. En conséquence, l'image sera placée au ras du haut du wrapper, éliminant ainsi l'espace indésirable.

Après avoir appliqué la propriété vertical-align, le CSS ressemblerait à :

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

Cette modification garantit que l'image occupe toute la hauteur verticale de l'emballage, éliminant l'espace vide et présentant une disposition visuellement alignée.

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!