唐山網(wǎng)站建設(shè),唐山網(wǎng)站制作,唐山做網(wǎng)站,唐山網(wǎng)頁設(shè)計(jì),唐山網(wǎng)站優(yōu)化,唐山網(wǎng)絡(luò)公司,唐山400電話業(yè)務(wù) 24小時(shí)熱線：15031560143   關(guān)于我們 | 網(wǎng)站模版 | 支付方式 | 網(wǎng)站地圖
首頁 > 唐山企業(yè)做網(wǎng)站DIV頁面編寫時(shí)插入圖片，圖片下方有空隙的解決辦法！
唐山企業(yè)做網(wǎng)站DIV頁面編寫時(shí)插入圖片，圖片下方有空隙的解決辦法！
時(shí)間：2019/4/2 8:42:27 作者：lichangcheng 人氣： 標(biāo)簽：****插入圖片有空隙解決方法

　　

當(dāng)我們用div拼接一些圖片時(shí)，會(huì)發(fā)現(xiàn)div下方會(huì)有多出來的一條白線，用chrome瀏覽器查看元素的時(shí)候， 
圖片的高度是326.3px,但是作為容器的div的高度確是330px,貌似直接就四舍五入了，其中的原因是因?yàn)閕mg作為行內(nèi)元素，每次換行都會(huì)默認(rèn)有有一個(gè)空隙 
 
如圖所示，黃色的是兩個(gè)span，他們都是行內(nèi)元素，兩個(gè)行內(nèi)元素之間有一個(gè)空隙。 
紅色的是兩個(gè)div，他們都是塊元素，之間并沒有空隙

所以解決空隙的辦法是 <img src="images/yqlj_02.gif" style="display:block;"> 這樣就把圖片變成塊元素了，空隙就沒有了
如下圖所示：