Warum hat mein HTML5-Bild einen unteren Rand von 3 Pixeln, obwohl kein explizites CSS vorhanden ist?

HTML 5-Bildanomalie: Unerklärliches Problem mit dem unteren Rand

Bei der Verwendung von HTML 5 können Benutzer auf ein verwirrendes Problem stoßen, bei dem Bilder in DIV-Elemente eingeschlossen sind weisen einen unerklärlichen unteren Rand von 3 Pixeln auf. Diese Anomalie bleibt bestehen, obwohl im CSS keine expliziten Randdefinitionen vorhanden sind. Betrachten Sie beispielsweise die folgende HTML-Struktur:

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

Wenn das .placeholder-DIV über den Stil display:table verfügt, bleiben die Abmessungen des Bildes bei 50x50px. Allerdings wird der .placeholder DIV auf mysteriöse Weise vertikal auf 53 Pixel erweitert. Dieses unerwartete Verhalten hat viele Entwickler auf der Suche nach einer Lösung verwirrt.

Lösung: Vertikale Ausrichtung

Die Hauptursache dieser Anomalie liegt in der Behandlung des Bildes als Textzeichen, was zu … Darunter befindet sich ein unnötiger Raum, der dem Platz ähnelt, den die Nachkommen von Buchstaben wie „y“ oder „g“ einnehmen. Um dies zu beheben, stellt die CSS-Eigenschaft „Vertical-Align“ sicher, dass kein solcher Platz zugewiesen wird. Praktisch jeder Wert für die vertikale Ausrichtung ist ausreichend, wobei „Mitte“ eine beliebte Wahl ist.

img {
    vertical-align: middle;
}

Durch die Implementierung dieser Lösung wird der untere 3-Pixel-Rand effektiv eliminiert und das Bildanzeigeproblem behoben. Wie in der aktualisierten jsFiddle dargestellt, zeigen das Bild und das umgebende DIV jetzt ihre beabsichtigten Abmessungen ohne den eigentümlichen leeren Raum unter dem Bild an.

Das obige ist der detaillierte Inhalt vonWarum hat mein HTML5-Bild einen unteren Rand von 3 Pixeln, obwohl kein explizites CSS vorhanden ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!