DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> HTML5中圖片之間的縫隙完美解決方法
HTML5中圖片之間的縫隙完美解決方法
編輯:HTML5教程     

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

如圖:

圖片之間有空隙 

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

1,把body的font-size 設置成0;
 

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

2,把

  <img src="assets/img/turntable/lucky-turntable_07.jpg">
    <img src="assets/img/turntable/lucky-turntable_11.png" >
    <img src="assets/img/turntable/lucky-turntable_08.jpg">

寫成

<img src="assets/img/turntable/lucky-turntable_07.jpg"><img src="assets/img/turntable/lucky-turntable_11.png"><img src="assets/img/turntable/lucky-turntable_08.jpg">

也就是說,把img標簽寫在同一行,中間不要有空格;

以上所述是小編給大家介紹的HTML5中圖片之間的縫隙完美解決方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved