Warum hat mein Bild darunter Platz?

Lesezeit: 3 Minuten

Warum hat mein Bild darunter Platz
Niet the Dark Absol

Bilder gewinnen darunter einen mysteriösen leeren Raum, auch wenn padding:0;margin:0 angewendet werden.

Demonstration

Bildschirmfoto

Der rote Rand sollte das Bild umschließen, aber auf der unteren Seite ist Platz.

Woran liegt das und wie kann ich dieses Leerzeichen entfernen?

  • Beantwortet das deine Frage? Bild innerhalb von div hat zusätzlichen Platz unter dem Bild

    – Oliver Joseph Ash

    15. November 2020 um 16:56 Uhr

Warum hat mein Bild darunter Platz
Niet the Dark Absol

Bilder (und Inline-Block-Elemente im Allgemeinen) werden wie ein Zeichen behandelt.

Als solche gehorchen sie der Regel der Grundlinie.

In normalem Text ist die Grundlinie die Linie über dem unteren Rand der meisten Buchstaben, wie in diesem Satz.

Aber einige Buchstaben, wie z p, q, j usw. haben Schwänze, die unter die Grundlinie fallen. Um zu verhindern, dass diese Schwänze mit Buchstaben in der nächsten Zeile kollidieren, wird zwischen der Grundlinie und der unteren Zeile Platz reserviert.

Dieses Diagramm veranschaulicht die verschiedenen Textzeilen:

Basisdiagramm von WHATWG

(Bild von WASWG)

Das Bild wird also an der Grundlinie ausgerichtet, auch wenn kein Text vorhanden ist. Glücklicherweise ist die Lösung sehr einfach:

img {vertical-align:bottom}

Dadurch wird das Bild am unteren Rand der Linie ausgerichtet und auch der Mystery-Bereich entfernt.

Seien Sie vorsichtig, wenn Ihr Bild klein ist (kleiner als die Zeilenhöhe), sehen Sie möglicherweise stattdessen einen mysteriösen Raum über dem Bild. Um dies zu beheben, fügen Sie hinzu line-height:1px zum Containerelement.

Hoffentlich hilft das den vielen Leuten, die ich gesehen habe, nach diesem und ähnlichen Problemen fragen!

  • @tman Danke – schreibe zum ersten Mal eine Referenzantwort, also irgendwie nervös! Mehr Menschen müssen davon erfahren.

    – Niet the Dark Absol

    28. Juli 2013 um 7:20 Uhr

  • Hübsch. Warum tut line-height: 1px Arbeit? Es ist ein Hack, gibt es also einen etwas vernünftigeren Wert, den wir verwenden können?

    – Andi G

    28. Juli 2013 um 7:29 Uhr

  • Verwenden Sie im Idealfall eine Höhe, die der Höhe des Bildes entspricht. Grundsätzlich die 1px macht den für Text reservierten Platz sehr klein, so dass das Bild die Linie “streckt” und sicherstellt, dass kein zusätzlicher Platz übrig bleibt.

    – Niet the Dark Absol

    28. Juli 2013 um 7:30 Uhr

  • @Kolink: Da dies geschlossen wird (3/5 Stimmen), ist es möglicherweise schön, diese Antwort auf dem Duplikat erneut zu veröffentlichen. Es ist eine detailliertere Antwort als die anderen, die derzeit dort sind.

    – Matt

    28. Juli 2013 um 11:35 Uhr

  • Während es andere gute Lösungsantworten gibt, ist dies die beste Erklärung dafür warum. “Das Bild wird an der Grundlinie ausgerichtet, auch wenn kein Text vorhanden ist” Das bedeutet, dass selbst wenn Sie die Bildgröße angeben, die wahr Höhe beinhaltet das (schriftartabhängige) Delta zwischen Unterkante und Grundlinie, ein Wert, den Sie niemals im Stil-Inspektor sehen werden!

    – Johannes Neuhaus

    2. November 2020 um 18:41 Uhr


Ändern img zu einem Element auf Blockebene

img {
  display: block;
}

wird auch den Raum unter dem Bild entfernen.

  • Aber es verhindert, dass Sie mehrere Bilder nebeneinander haben.

    – Niet the Dark Absol

    28. Juli 2013 um 7:47 Uhr

  • Die Demonstration Link in der Frage zeigt die img Element eingewickelt in a div Element. EIN div ist standardmäßig auf Blockebene, so dass dies an sich mehrere Instanzen von verhindern würde div + img nebeneinander darstellen. Wenn die Bilder im Markup benachbart waren, dann display: inline-block würde sowohl den Leerraum darunter entfernen als auch die Elemente nebeneinander anzeigen.

    – Astrotim

    28. Juli 2013 um 8:11 Uhr

  • @ Astrotim – Das ist nicht korrekt. display: inline-block wird das Leerzeichen unten nicht entfernen.

    – Alohci

    28. Juli 2013 um 10:03 Uhr

  • @Alohci, ich stehe korrigiert. Man müsste sich bewerben display: inline-block zum Elternteil div und display: block zum Kind img für Bilder nebeneinander mit entferntem Leerzeichen.

    – Astrotim

    28. Juli 2013 um 11:07 Uhr

  • Up-voted, weil dies tut das in der Frage gestellte Problem lösen. Der obige Kommentar von @NiettheDarkAbsol wird in der ursprünglichen Frage nicht als Bedenken aufgeführt und ist kein Grund, diese Antwort abzulehnen.

    – TylerH

    29. Dezember 2014 um 0:36 Uhr

Schauen Sie sich dieses CSS an jsfiddle
CSS

div {border:1px solid red;width:100px;line-height:0}
img {width:100px;}

915790cookie-checkWarum hat mein Bild darunter Platz?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy