css中如何取消圖片間隔

這篇文章將為大家詳細講解有關css中如何取消圖片間隔，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

css中取消圖片間隔的方法：首先創建一個HTML示例文件；然后通過img標簽插入兩個圖像；接著在img標簽的父級上寫“font-size:0;”；最后設置屬性“display:block”即可。

取消img圖片間隙的方法

1、多個img標簽寫在一行

<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"/>

效果：

2、在img標簽的父級上寫：font-size:0;//這個在解決display：inline-block出現的問題也有幫助

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

效果：

3、使用display：block(img是內聯元素)//要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"/>

效果：

4、使用letter-spacing屬性

<div style="letter-spacing:-800px"><!--letter-spacing的值無論是負多少都不會產生重疊-->
    <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
    <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
</div>

效果：

關于css中如何取消圖片間隔就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。