Heim >Web-Frontend >CSS-Tutorial >Wie entferne ich Leerzeichen zwischen Inline-Bildern mithilfe von CSS?

Wie entferne ich Leerzeichen zwischen Inline-Bildern mithilfe von CSS?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-03 22:00:03774Durchsuche

How to Remove Spaces Between Inline Images Using CSS?

Abstände zwischen Bildern mit CSS entfernen

Das Problem des Abstands zwischen Bildern bei der Inline-Anzeige ist ein häufiges Problem. Standardmäßig stellen Browser jede Folge von Leerzeichen (Leerzeichen, Tabulatoren, Zeilenumbrüche) als einzelnes Leerzeichen dar.

Um dieses Leerzeichen zu beseitigen, bietet CSS eine einfache Lösung. Indem Sie die Anzeigeeigenschaft der Bildelemente auf „Blockieren“ setzen, können Sie sie dazu zwingen, sich wie Elemente auf Blockebene zu verhalten.

<code class="css">img {
  display: block;
}</code>

Diese CSS-Regel ändert das Anzeigeverhalten aller Bilder auf der Seite und stellt sicher, dass sie angezeigt werden in ihren eigenen Zeilen und eliminiert jegliche Leerzeichen zwischen ihnen.

<code class="html"><div class="nospace">
    <img src="..." />
    <img src="..." />
</div></code>

Wenn diese CSS-Regel auf das

Wenn Sie die Bilder enthalten, rendert der obige Code die Bilder nebeneinander, ohne Leerzeichen dazwischen.

Das obige ist der detaillierte Inhalt vonWie entferne ich Leerzeichen zwischen Inline-Bildern mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn