圖片之間的縫隙解決方法

在h專案中，幾個img標籤中間有大約3px的空隙 ，效果非常不好那麼如何解決呢？下面小編跟大家分享HTML5中圖片之間的縫隙完美解決方法，需要的朋友參考下吧，希望能幫助大家。

最近做h5的項目，碰到了一個百思不得其解的問題，幾個img標籤中間有大約3px的空隙

如圖：

 

後來百度查了一番，大致了解了原因，是因為瀏覽器把元素當成了字，空隙是給一些對齊字母後仍然長出一截的（例如j,g）預留的。也找到了幾種解決方法，親測可行。

1，將body的font-size 設為0；
 

這樣做的時候要記得下面寫p的時候給元素指定字號。

2,把

  <img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_07.jpg"  class="lazy"   alt="圖片之間的縫隙解決方法" >
    <img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_11.png"  class="lazy"    alt="圖片之間的縫隙解決方法" >
    <img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_08.jpg"  class="lazy"   alt="圖片之間的縫隙解決方法" >

寫成

<img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_07.jpg"  class="lazy"   alt="圖片之間的縫隙解決方法" ><img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_11.png"  class="lazy"   alt="圖片之間的縫隙解決方法" ><img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_08.jpg"  class="lazy"   alt="圖片之間的縫隙解決方法" >

也就是說，把img標籤寫在同一行，中間不要有空格；

大家學會了嗎？趕快動手嘗試。

相關推薦：

怎麼用CSS讓圖片高度自動縮放比例

html裡怎麼插入圖片

詳解css的外邊距margin的使用

以上是圖片之間的縫隙解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！