css 圖片有間隔多個(gè)Img標(biāo)簽之間的間隙

2018-3-9    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里 

今天寫(xiě)css時(shí)發(fā)現(xiàn)，圖片加起來(lái)剛好是900px的三張圖片，不能在一個(gè)900px寬容器放下，因?yàn)閳D片之間有間隔，我猜是瀏覽器把兩個(gè)img標(biāo)簽之間的空格當(dāng)成了空白節(jié)點(diǎn)。

在網(wǎng)上找到了幾個(gè)不錯(cuò)的解決方法：

1.多個(gè)img標(biāo)簽寫(xiě)在一行 

<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>

效果前：技術(shù)分享

效果后：技術(shù)分享

 

2.在img標(biāo)簽的父級(jí)上寫(xiě)：font-size:0;//這個(gè)在解決display：inline-block出現(xiàn)的問(wèn)題也有幫助 

<div style="font-size:0"> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> </div>

效果：技術(shù)分享

 

3.使用display：block(img是內(nèi)聯(lián)元素)//要float一下才行 

<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px" style="display:block"/>

效果:技術(shù)分享

 

4.使用letter-spacing屬性 

<div style="letter-spacing:-800px"><!--letter-spacing的值無(wú)論是負(fù)多少都不會(huì)產(chǎn)生重疊--> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> </div>

效果:技術(shù)分享

藍(lán)藍(lán)設(shè)計(jì)( yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔