So lösen Sie das Problem der leeren Lücke am unteren Rand des Bildes mit CSS

Problembeschreibung:

Beim Zitieren von Bildern gibt es unten immer eine Leerstelle, wie im Bild unten gezeigt.

CSS-Code:

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

Ursachenanalyse:

Inline-Blockelemente werden an der Grundlinie des Textes ausgerichtet.

(Empfohlenes Tutorial: CSS-Tutorial)

Lösung:

1. Fügen Sie Vertical-Align: Middle Top | hinzu Bild. (Empfohlen)

img {
    vertical-align: bottom;
}

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

g {
    display: block;
}

Empfohlen Verwandte Video-Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem der leeren Lücke am unteren Rand des Bildes mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!