Heim  >  Artikel  >  Web-Frontend  >  So beheben Sie Lücken zwischen Bildern

So beheben Sie Lücken zwischen Bildern

小云云
小云云Original
2017-12-11 11:53:263414Durchsuche

Im h-Projekt gibt es Lücken von etwa 3 Pixeln zwischen mehreren IMG-Tags. Der Effekt ist also sehr schlecht. Der unten stehende Editor wird Ihnen die perfekte Lösung für die Lücken zwischen Bildern in HTML5 vorstellen. Freunde, die sie benötigen, können darauf verweisen.

Bei der Arbeit an einem h5-Projekt bin ich auf ein Problem gestoßen, das ich nicht herausfinden konnte. Es gab eine Lücke von etwa 3 Pixeln zwischen mehreren IMG-Tags

Wie gezeigt:

So beheben Sie Lücken zwischen Bildern

Später hat Baidu es überprüft und den Grund grob verstanden. Dies liegt daran, dass der Browser das Element als Wort behandelt und die Lücke immer noch besteht Lange nach der Angabe einiger ausgerichteter Buchstaben ist ein Abschnitt (z. B. j, g) reserviert. Ich habe auch mehrere Lösungen gefunden, die für den persönlichen Test machbar sind.

1, setzen Sie die Schriftgröße des Textkörpers auf 0;

Denken Sie dabei daran, beim Schreiben von p unten die Schriftgröße für das Element anzugeben.

2. Schreiben Sie

  <img  src="assets/img/turntable/lucky-turntable_07.jpg" alt="So beheben Sie Lücken zwischen Bildern" >
    <img  src="assets/img/turntable/lucky-turntable_11.png"  alt="So beheben Sie Lücken zwischen Bildern" >
    <img  src="assets/img/turntable/lucky-turntable_08.jpg" alt="So beheben Sie Lücken zwischen Bildern" >

als

<img  src="assets/img/turntable/lucky-turntable_07.jpg" alt="So beheben Sie Lücken zwischen Bildern" ><img  src="assets/img/turntable/lucky-turntable_11.png" alt="So beheben Sie Lücken zwischen Bildern" ><img  src="assets/img/turntable/lucky-turntable_08.jpg" alt="So beheben Sie Lücken zwischen Bildern" >

Mit anderen Worten: Schreiben Sie die IMG-Tags in die gleiche Zeile, ohne Leerzeichen in der Mitte

Haben Sie das gelernt? Beeilen Sie sich und probieren Sie es aus.

Verwandte Empfehlungen:

So verwenden Sie CSS, um die Höhe eines Bildes automatisch zu skalieren

So fügen Sie ein Bild ein in HTML

Detaillierte Erläuterung der Verwendung von CSS-Außenrändern

Das obige ist der detaillierte Inhalt vonSo beheben Sie Lücken zwischen Bildern. 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