Lösen Sie das Problem der leeren Lücke am unteren Rand des Img-Bildes

Bei der Arbeit an einem aktuellen Projekt habe ich festgestellt, dass beim Verweisen auf Bilder immer ein leerer Bereich unten blieb, wie in der folgenden Abbildung dargestellt.

<Stil>
    .img-box {
        Rand: 2px durchgehend rot;
        Breite: 550px;
    }
</Stil>

<div Klasse="Bildbox">
    <img src="./img.png" alt="">
</div>

Später fand ich heraus, dass der Grund darin liegt, dass die Inline-Blockelemente an der Textgrundlinie ausgerichtet werden. Dieses Problem zu lösen ist eigentlich sehr einfach, es gibt zwei Hauptmethoden:

1. Fügen Sie dem Bild die vertikale Ausrichtung hinzu: Mitte | oben | unten usw. (Empfohlen)

img {
    vertikale Ausrichtung: unten;
}

2. Konvertieren Sie das Bild in ein Blockelement display: block; (Das Konvertieren von Blockelementen kann sich auf Ihr Layout auswirken, daher wird die erste Methode empfohlen.)

G {
    Anzeige: Block;
} 

Nun, das Problem ist so einfach zu lösen.
Wenn Sie bessere Methoden kennen, teilen Sie diese gerne mit und hinterlassen Sie eine Nachricht im Kommentarbereich.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.