Comment supprimer l'espace blanc sous les images de bloc en ligne tout en les gardant intégrées ?

Comment supprimer l'espace blanc entre le bas de l'image du bloc en ligne et le wrapper tout en gardant le bloc de l'image en ligne

Utilisé en CSS inline-block permet aux images de s'aligner avec des éléments de texte. Cependant, dans certains cas, vous rencontrerez le problème de l’espace blanc entre le bas de l’image et le wrapper. Cela peut être dû à l'espacement vertical par défaut que le navigateur ajoute aux éléments de bloc en ligne.

Pour résoudre ce problème, vous pouvez définir la propriété vertical-align sur top. Cela définit l'alignement vertical de l'image vers le haut, éliminant ainsi les espaces blancs.

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

Après avoir appliqué ce style, l'image sera alignée avec le haut du wrapper et les espaces seront supprimés.

Il est important de noter que cette solution ne fonctionne pas dans tous les navigateurs. Dans certains navigateurs plus anciens, il peut être nécessaire d'utiliser d'autres méthodes, comme envelopper l'image dans un élément span et définir vertical-align: top pour cet élément.

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!