Warum haben Bilder in HTML5-DIVs einen unteren Rand von 3 Pixel und wie kann ich das beheben?

Behebung eines unerklärlichen Randproblems mit Bildern in HTML5

In HTML5 sind Benutzer auf ein unerwartetes Problem gestoßen, bei dem in DIV-Elementen eingeschlossene Bilder einen ungeklärten Effekt erhalten 3 Pixel unterer Rand, obwohl es keine CSS-Definitionen gibt, die dies verursachen. Dieses Problem wurde auch dann beobachtet, wenn die Höhe und Breite des Bildes sowie der DIV beide auf 50 Pixel eingestellt sind.

Um diese Anomalie zu beheben, kann das Problem darauf zurückgeführt werden, dass sich das Bild wie ein Zeichen im Text verhält und erstellt Darunter befindet sich ein Platz zum Aufhängen von Zeichen wie „y“ oder „g“. Die Lösung besteht darin, die CSS-Eigenschaft „Vertical-Align“ zu verwenden, um anzugeben, dass kein solcher Platz erforderlich ist. Jeder Wert für die vertikale Ausrichtung ist ausreichend, wobei „Mitte“ eine beliebte Wahl ist.

Implementieren dieses Fixes in CSS:

img {
    vertical-align: middle;
}

Durch die Einbindung dieses Codes verlieren die Bilder das Unerwünschte unteren Rand, was zum erwarteten Verhalten führt. Eine praktische Demonstration finden Sie in dieser aktualisierten jsFiddle: http://jsfiddle.net/fRpK6/1/.

Das obige ist der detaillierte Inhalt vonWarum haben Bilder in HTML5-DIVs einen unteren Rand von 3 Pixel und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!