Comment éliminer l'espace indésirable sous les images de blocs en ligne ?

Comment éliminer l'espace indésirable sous les images de bloc en ligne

Lors de l'utilisation d'images de bloc en ligne, vous pouvez rencontrer un problème où il y a des éléments supplémentaires espace entre le bas de l’image et son emballage. Ceci est dû à l'alignement vertical par défaut des éléments en ligne.

Solution : utiliser l'alignement vertical

Pour vous débarrasser de l'espace indésirable, vous devez définir l'alignement vertical. pour l'image. Cela peut être fait en utilisant la propriété vertical-align. En spécifiant vertical-align:top, l'image sera alignée sur le haut du wrapper, éliminant ainsi l'espace supplémentaire.

Exemple :

Ajoutez le style suivant à votre CSS :

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

Démo :

Vous pouvez voir un exemple fonctionnel sur ce JSFiddle : http://jsfiddle.net/dJVxb/4/. Le CSS mis à jour supprime l'espace indésirable et aligne l'image en haut du wrapper.

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!