Wie kann unerwünschter Platz unter Inline-Block-Bildern beseitigt werden?

So beseitigen Sie unerwünschten Platz unter Inline-Block-Bildern

Bei der Verwendung von Inline-Block-Bildern kann es zu einem Problem kommen, bei dem zusätzlicher Platz vorhanden ist Abstand zwischen dem unteren Rand des Bildes und seiner Hülle. Dies wird durch die standardmäßige vertikale Ausrichtung für Inline-Elemente verursacht.

Lösung: Vertikale Ausrichtung verwenden

Um den unerwünschten Leerraum zu entfernen, müssen Sie die vertikale Ausrichtung festlegen für das Bild. Dies kann mithilfe der Vertical-Align-Eigenschaft erfolgen. Durch die Angabe von „vertikal-align:top“ wird das Bild am oberen Rand des Wrappers ausgerichtet, wodurch der zusätzliche Platz entfällt.

Beispiel:

Fügen Sie den folgenden Stil hinzu Ihr CSS:

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

Demo:

Sie können ein funktionierendes Beispiel in diesem JSFiddle sehen: http://jsfiddle.net/dJVxb/4/. Das aktualisierte CSS entfernt den unerwünschten Leerraum und richtet das Bild oben im Wrapper aus.

Das obige ist der detaillierte Inhalt vonWie kann unerwünschter Platz unter Inline-Block-Bildern beseitigt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!