Warum haben HTML5-Bilder in DIVs manchmal einen mysteriösen unteren Rand von 3 Pixeln?

Den mysteriösen 3-Pixel-Rand in HTML5-Bildern verstehen

Mehrere Benutzer sind auf ein unerwartetes Phänomen gestoßen, bei dem Bilder in DIV-Elementen einen seltsamen unteren 3-Pixel-Rand aufweisen trotz des Fehlens expliziter CSS-Ränder. Um tiefer in diese Anomalie einzutauchen, untersuchen wir das bereitgestellte Code-Snippet:

<div class="placeholder">
    <img src="/static/imghwm/default1.png" data-src="/haha.jpg" class="lazy" alt="">
</div>

Beim Zuweisen eines display:table-Stils zu .placeholder deutet die hinzugefügte Höhe (53 Pixel statt 50 Pixel) darauf hin, dass sich das Bild wie folgt verhält ein Zeichen in einer Textzeichenfolge, wobei unten ein Platz für einen hängenden Buchstaben wie „y“ oder „g“ bleibt.

Um dieses Problem zu beheben, muss das CSS Die Eigenschaft Vertical-Align kann verwendet werden, um anzugeben, dass kein solcher Platz erforderlich ist. Wie im bereitgestellten Codeblock gezeigt, richtet die Einstellung „vertikal-align: middle“ das Bild vertikal aus, ohne zusätzlichen Leerraum zu hinterlassen.

Hier ist der überarbeitete Code mit der implementierten Lösung:

img {
    vertical-align: middle;
}

Durch Anwenden Durch diese Anpassung werden die Bilder innerhalb des DIV-Elements ordnungsgemäß ausgerichtet, wodurch der rätselhafte 3-Pixel-Rand entfällt. Benutzer können auf den beigefügten jsFiddle-Link für ein funktionierendes Beispiel verweisen:

http://jsfiddle.net/fRpK6/1/

Das obige ist der detaillierte Inhalt vonWarum haben HTML5-Bilder in DIVs manchmal einen mysteriösen unteren Rand von 3 Pixeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!