Wie entferne ich Leerraum unter Inline-Block-Bildern, während sie eingebettet bleiben?

So entfernen Sie den Leerraum zwischen dem unteren Rand des Inline-Blockbilds und dem Wrapper, während der Bild-Inline-Block erhalten bleibt

Wird in CSS verwendet Inline-Block ermöglicht die Ausrichtung von Bildern an Textelementen. In manchen Fällen kann es jedoch zu Leerräumen zwischen dem unteren Bildrand und dem Wrapper kommen. Dies kann an dem standardmäßigen vertikalen Abstand liegen, den der Browser den Inline-Blockelementen hinzufügt.

Um dieses Problem zu lösen, können Sie die Eigenschaft „vertikal ausrichten“ auf „oben“ setzen. Dadurch wird die vertikale Ausrichtung des Bildes nach oben festgelegt, wodurch Leerräume vermieden werden.

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

Nach der Anwendung dieses Stils wird das Bild am oberen Rand des Wrappers ausgerichtet und Leerzeichen werden entfernt.

Es ist wichtig zu beachten, dass diese Lösung nicht in allen Browsern funktioniert. In einigen älteren Browsern kann es erforderlich sein, andere Methoden zu verwenden, z. B. das Bild in ein Span-Element einzuschließen und Vertical-Align: Top für dieses Element festzulegen.

Das obige ist der detaillierte Inhalt vonWie entferne ich Leerraum unter Inline-Block-Bildern, während sie eingebettet bleiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!