Leerraum unter dem Bild entfernen

Sie können den folgenden Code verwenden, wenn Sie den Blockmodus nicht ändern möchten:

img{vertical-align:text-bottom}

Oder Sie können Folgendes verwenden, wie Stuart vorschlägt:

img{vertical-align:bottom}

Wenn Sie das Bild als Inline beibehalten möchten, können Sie vertical-align: top oder vertical-align: bottom drauf. Standardmäßig wird es an der Grundlinie ausgerichtet, daher die wenigen Pixel darunter.

Ich habe ein eingerichtet JSFiddle um verschiedene Lösungen für dieses Problem zu testen. Basierend auf den [vagen] Kriterien von

1) Maximale Flexibilität

2) Kein seltsames Verhalten

Die hier akzeptierte Antwort von

img { display: block; }

was von vielen Leuten empfohlen wird (wie in dieser exzellente Artikel ), rangiert tatsächlich an vierter Stelle.

Der 1., 2. und 3. Platz sind allesamt ein Fehler zwischen diesen drei Lösungen:

1) Die Lösung von Dave Kok und Hasan Gursoy:

img { vertical-align: top; } /* or bottom */

profis:

• Alle Anzeigewerte funktionieren sowohl auf dem übergeordneten als auch auf dem img.
• Kein sehr merkwürdiges Verhalten; Alle Geschwister des IMG fallen dorthin, wo Sie es erwarten würden.
• Sehr effizient.

nachteile:

• Im [vollkommen gültigen] Fall, dass sowohl das übergeordnete Element als auch das img "display: inline" haben, kann der Wert dieser Eigenschaft die Position des übergeordneten Elements des img bestimmen (etwas seltsam).

2) Einstellen von font-size: 0; für das übergeordnete Element:

.parent {
    font-size: 0;
    vertical-align: top;
}
.parent > * {
    font-size: 16px;
    vertical-align: top;
}

Da diese eine [Art] erfordert vertical-align: top auf dem img ist dies im Grunde eine Erweiterung der 1. Lösung.

profis:

• Alle Anzeigewerte funktionieren sowohl auf dem übergeordneten als auch auf dem img.
• Kein sehr merkwürdiges Verhalten; Alle Geschwister des IMG fallen dorthin, wo Sie es erwarten würden.
• Behebt das Inline-Whitespace-Problem für alle Geschwister des img.
• Obwohl dies immer noch die Position des übergeordneten Elements verschiebt, wenn das übergeordnete Element und img beide "display: inline" haben, können Sie das übergeordnete Element zumindest nicht mehr sehen.

nachteile:

• Weniger effizienter Code.
• Dies setzt ein "korrektes" Markup voraus. Wenn das IMG Textknotengeschwister hat, werden diese nicht angezeigt.

3) Einstellen von line-height: 0 für das übergeordnete Element:

.parent {
    line-height: 0;
    vertical-align: top;
}
.parent > * {
    line-height: 1.15;
    vertical-align: top;
}

Ähnlich wie bei der zweiten Lösung wird sie, um sie vollständig flexibel zu machen, im Grunde genommen zu einer Erweiterung der ersten.

profis:

• Verhält sich wie die ersten beiden Lösungen in allen Anzeigekombinationen, außer wenn das übergeordnete Element und das img "display: inline" haben.

nachteile:

• Weniger effizienter Code.
• Wenn sowohl das übergeordnete als auch das img "display: inline" haben, werden wir alle möglichen verrückten Dinge. (Vielleicht ist es nicht die beste Idee, mit der Eigenschaft `line-height` zu spielen ...)

Da haben Sie es also. Ich hoffe, das hilft einer armen Seele.

Ich habe diese Frage gefunden und keine der Lösungen hier hat für mich funktioniert. Ich habe eine andere Lösung gefunden, die die Lücken unter den Bildern in Chrome beseitigt hat. Ich musste hinzufügen line-height:0; zum img-Selektor in meinem CSS und die Lücken unter den Bildern sind verschwunden.

Verrückt, dass dieses Problem 2013 in Browsern weiterhin besteht.

Hatte dieses Problem, woanders die perfekte Lösung gefunden, wenn Sie nicht möchten, dass Sie den Block verwenden, fügen Sie einfach hinzu

img { vertical-align: top }

.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}

Geben Sie die Höhe des div .youtube-thumb die Höhe des Bildes. Das sollte das Problem im Firefox-Browser beheben.

.youtube-thumb{ height: 106px }

Wie bereits erwähnt, wird das Bild als Text behandelt, sodass die Unterseite für die nervigen Personen geeignet ist: "p, q, y, g, j"; Die einfachste Lösung ist die Zuweisung des img display: block; in deinem CSS.

Dies hemmt jedoch das Standard-Bildverhalten des Fließens mit dem Text. Um dieses Verhalten beizubehalten und den Raum zu beseitigen. Ich empfehle, das Bild mit so etwas zu verpacken.

<style>
    .imageHolder
    {
        display: inline-block;
    }
    img.noSpace
    {
        display: block;
    }
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>