Warum befindet sich unter meinem Inline-Bild-Tag unerwarteter Leerraum?

Geheimnisvoller Leerraum unter dem Bild-Tag gelöst

Sie haben kürzlich das Header-Bild Ihrer Website geändert und von einem CSS-Hintergrundbild zu einem Inline-Bild gewechselt Bildelement. Während das Bild jetzt wie vorgesehen skaliert wird, ist darunter eine unerwartete 10-Pixel-Lücke aufgetreten.

Nachdem Sie den Inspektor von Chrome verwendet, die Ursache jedoch nicht identifiziert haben, haben Sie sich an Online-Foren gewandt, um Hilfe zu erhalten. Eine vorgeschlagene Lösung basiert auf dem Konzept der typografischen Unterlängen.

Unterlängen sind Buchstaben, die im Text über die Grundlinie hinausragen, z. B. „j“, „g“, „p“ und „y“. Standardmäßig folgen Inline-Elemente wie Bilder der Grundlinienausrichtung, die den für Unterlängen erforderlichen Platz berücksichtigt.

Lösungen:

• Vertikal festlegen- align:bottom to the img tag: Dadurch wird das Bild am unteren Rand des Containers ausgerichtet und das Weiß entfernt Leerzeichen.
• Ändern Sie display: inline in display: block: Dies wandelt das img-Tag in ein Element auf Blockebene um und entfernt seine Grundlinienausrichtung.
• Anpassen Die Zeilenhöheneigenschaft des Containers: Wenn Sie die Zeilenhöhe auf 0 setzen, kann dies beseitigt werden Lücke.
• Legen Sie eine Schriftgröße von 0 für den Container fest: Dadurch wird auch die Grundlinienausrichtung beseitigt, es kann jedoch erforderlich sein, die Schriftgröße für untergeordnete Elemente wiederherzustellen.

Das obige ist der detaillierte Inhalt vonWarum befindet sich unter meinem Inline-Bild-Tag unerwarteter Leerraum?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!