Detaillierte Erklärung des Abstandsproblems zwischen IMG-Tags

Grundlegende Analyse des IMG-Tags: In HTML5 besteht das IMG-Tag aus vier Elementen:

(1) src: Bildpfad (2) Breite:
(3) Höhe:
(4) alt:

Die Rolle der Warnung:

Wenn in einem Bild ein Fehler auftritt, verwenden Sie die Funktion in Alt, um den Fehlerinhalt anzugeben, damit die Suchmaschine ihn leichter durchsuchen kann (praktisch für das Crawlen durch die Suchmaschine und die SEO-Wiedergabe).

Notiz:

(1) Die für img eingestellte Breite und Höhe muss der Originalgröße des Bildes entsprechen. (2) Im Allgemeinen können Inline-Elemente Breite und Höhe nicht einstellen. Obwohl img auch ein Inline-Element ist, ist es ein ersetztes Element und kann über src eingestellt werden.

Der Unterschied zwischen Inline-Elementen und Inline-Elementen.

So lösen Sie das Abstandsproblem zwischen Inline-Elementen:

Die Gründe für die oberen und unteren Lücken in den Inline-Elementen in der folgenden Abbildung sind:

img ist ein Inline-Element => Inline-Elemente erzeugen standardmäßig Zeilenumbrüche im Elementcode (auch Whitespace genannt => können standardmäßig auch als Textstring verwendet werden)

Der Grund für die vertikale Lücke zwischen Inline-Elementen in der folgenden Abbildung:

Die standardmäßige Grundlinienausrichtung von Inline-Elementen führt dazu, dass leere Knoten angezeigt werden (vertical-align: baseline;).
Was ist Baseline-Ausrichtung?
Wirkt vertikal und horizontal. Was ist ein leerer Knoten?
Der Grund für leere Knoten in vertikaler Richtung: Da das Inline-Element img im Browser möglicherweise als Zeichenfolge behandelt wird, kann es von der Schriftgröße in Front-Size beeinflusst werden, und die Zeilenhöhe wirkt sich auch auf den leeren Knoten aus => Wenn ein Bild hinzugefügt wird, wird unten eine zusätzliche leere Zeile angezeigt, was die Rolle des leeren Knotens ist

Lösung 1:

Da Inline-Elemente als Zeichenfolgen behandelt werden, können Sie dem übergeordneten Element eine Schriftgröße von 0 hinzufügen. Die Ausrichtung wird dann zu „Vertical-Align: Middle“. Dies kann jedoch zu Problemen mit dem Textstil im übergeordneten Element führen.

Lösung 2:

Verwenden Sie „display“, um von einem Inline-Element zu einem Block-Level-Element zu wechseln:

Hinweis: Die beiden am schwierigsten zu verstehenden Wissenspunkte in CSS sind vertikale Ausrichtung und Zeilenhöhe: Warum kann die Schriftgröße auf 0 geändert werden? Kann der leere Knoten von img verschwinden?

Text- und Bildbeispiel: Verwenden von Span-Tags mit Bildern

Die Ausrichtung der beiden Inline-Elemente ist „vertical-align: baseline“. Es ist deutlich zu erkennen, dass der Text über die Grundlinie des Bildes hinausragt.

In der folgenden Abbildung wird die Textgröße geändert und der vertikale Abstand zwischen den Bildern vergrößert.

Ursachen:

Der Text hat eine Standardzeilenhöhe, die einen vertikalen Abstand zwischen den Texten erzeugt. Je größer der Text, desto größer der Abstand. => Wenn „vertical-align: miiddle;“ verwendet wird, steigt die Textposition an und es wird kein Abstand erzeugt, wie unten gezeigt

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.