Warum ist unter meinem Inline-Block-Bild Platz und wie kann ich das beheben?

Platz unter Inline-Block-Bildern auflösen

In Ihrem Codebeispiel versuchen Sie, mithilfe der Anzeige ein Bild inline mit dem Text anzuzeigen: inline-block-Eigenschaft, beachten Sie jedoch einen unerwünschten Leerraum unter dem Bild. Um dieses Problem anzugehen, wollen wir uns mit den Ursachen und einer umfassenden Lösung befassen.

Der Zeilenumbruch, der auf das Bildelement folgt, schafft Platz, da Inline-Elemente auf natürliche Weise darunter Platz für potenzielle Textinhalte reservieren. Da das Bild keinen Textinhalt hat, bleibt dieser Platz unbelegt und erscheint als unerwünschte Lücke.

Um diesen Platz zu eliminieren, müssen wir den Zeilenumbruch entfernen. Eine Möglichkeit, dies zu erreichen, besteht darin, die Eigenschaft „vertikal ausrichten“ für das Bild auf „oben“ zu setzen. Dadurch wird der obere Rand des Bildes vertikal an der Grundlinie des umgebenden Textes ausgerichtet.

<code class="CSS">img {
    display: inline-block; 
    margin: 0;
    vertical-align: top;
}</code>

Mit dieser Anpassung verschwindet der Raum unter dem Bild, sodass das Bild bündig mit dem umgebenden Inhalt abschließt. Sie können dies überprüfen, indem Sie Ihren Code in der bereitgestellten Fiddle ändern: http://jsfiddle.net/dJVxb/4/.

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