Warum haben Inline-Block-Bilder zusätzlichen Platz unter sich und wie kann ich das beheben?

Geheimnisvoller Raum unter Bildern: Enthüllung der Ursache und Lösung

Bei der Anzeige von Bildern als Inline-Block-Elemente kann es zu einem verwirrenden Szenario kommen, in dem Darunter erscheint ein leerer Raum, obwohl der Abstand und der Rand auf Null gesetzt sind. Dieses rätselhafte Phänomen ist auf das inhärente Verhalten von Inline-Block-Elementen zurückzuführen, die Zeichen in Texten ähneln.

So wie Buchstaben Grundlinien haben, die die untere Reihe von Zeichen angeben, werden Bilder an dieser Grundlinie ausgerichtet. Selbst wenn kein flankierender Text vorhanden ist, wird das Bild folglich an der Grundlinie ausgerichtet, wodurch eine Lücke darunter entsteht, da Platz für hängende Enden an Buchstaben wie „p“ und „q“ reserviert ist.

Um dies zu beheben, Wir können die Leistung von Vertical-Align:Bottom nutzen. Diese CSS-Eigenschaft verankert das Bild am Ende der Zeile und entfernt so effektiv den verbleibenden Leerraum.

img {
    vertical-align:bottom;
}

Bei Bildern, die kleiner als die Zeilenhöhe sind, ist eine geringfügige Anpassung erforderlich. Durch die Einführung von „line-height:1px“ in das Containerelement wird jeglicher potenzielle Platzeingriff über dem Bild verhindert.

Durch die Übernahme dieser einfachen Anpassungen wird sichergestellt, dass Bilder genau in ihrem zugewiesenen Raum Platz finden, ohne dass darunter rätselhafte leere Bereiche vorhanden sind.

Das obige ist der detaillierte Inhalt vonWarum haben Inline-Block-Bilder zusätzlichen Platz unter sich und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!