Comment résoudre le problème de l'espace vide en bas de l'image avec CSS

Description du problème :

Lorsque vous citez des images, il y a toujours un espace vide en dessous, comme le montre l'image ci-dessous.

Code CSS :

<style>
    .img-box {
        border: 2px solid red;
        width: 550px;
    }
</style>
<div class="img-box">
    <img src="./img.png" alt="">
</div>

Analyse des causes :

Les éléments de bloc en ligne seront alignés sur la ligne de base du texte.

(Tutoriel recommandé : Tutoriel CSS)

Solution :

1. Ajouter un alignement vertical : milieu haut bas, etc. image. (Recommandé)

img {
    vertical-align: bottom;
}

2. Convertissez l'image en affichage d'éléments au niveau du bloc : block; (La conversion des éléments au niveau du bloc peut affecter votre mise en page, la première méthode est donc recommandée)

g {
    display: block;
}

Recommandé. tutoriels vidéo associés : tutoriel vidéo CSS

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!