css 圖片有間隔多個Img標籤之間的間隙

<article class="baidu_pl"> <div id="article_content" class="article_content clearfix" data-report-click="{&quot;mod&quot;:&quot;popu_307&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/github_38948311/article/details/73011656&quot;}"> <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css"> <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css"> <div class="htmledit_views" id="content_views">

<p>今天寫css時發現，圖片加起來恰好是900px的三張圖片，不能在一個900px寬容器放下，由於圖片之間有間隔，我猜是瀏覽器把兩個img標籤之間的空格當成了空白節點。</p> <p>在網上找到了幾個不錯的解決方法：</p> <p></p> <p style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <span>1.多個img標籤寫在一行</span></p> <div class="cnblogs_code" style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <pre style="font-family:'Microsoft YaHei';border:1px dotted rgb(170,170,170);"><span><span style="color:rgb(0,0,255);">&lt;</span><span style="color:rgb(128,0,0);">img </span><span style="color:rgb(255,0,0);">src</span><span style="color:rgb(0,0,255);">="/i/eg_tulip.jpg"</span><span style="color:rgb(255,0,0);"> alt</span><span style="color:rgb(0,0,255);">="鬱金香"</span><span style="color:rgb(255,0,0);"> height</span><span style="color:rgb(0,0,255);">="100px"</span><span style="color:rgb(0,0,255);">/&gt;</span> <span style="color:rgb(0,0,255);">&lt;</span><span style="color:rgb(128,0,0);">img </span><span style="color:rgb(255,0,0);">src</span><span style="color:rgb(0,0,255);">="/i/eg_tulip.jpg"</span><span style="color:rgb(255,0,0);"> alt</span><span style="color:rgb(0,0,255);">="鬱金香"</span><span style="color:rgb(255,0,0);"> height</span><span style="color:rgb(0,0,255);">="100px"</span><span style="color:rgb(0,0,255);">/&gt;</span></span></pre> </div> <div class="cnblogs_code" style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <pre style="font-family:'Microsoft YaHei';border:1px dotted rgb(170,170,170);"><span><span style="color:rgb(0,0,255);">&lt;</span><span style="color:rgb(128,0,0);">img </span><span style="color:rgb(255,0,0);">src</span><span style="color:rgb(0,0,255);">="/i/eg_tulip.jpg"</span><span style="color:rgb(255,0,0);"> alt</span><span style="color:rgb(0,0,255);">="鬱金香"</span><span style="color:rgb(255,0,0);"> height</span><span style="color:rgb(0,0,255);">="100px"</span><span style="color:rgb(0,0,255);">/&gt;&lt;</span><span style="color:rgb(128,0,0);">img </span><span style="color:rgb(255,0,0);">src</span><span style="color:rgb(0,0,255);">="/i/eg_tulip.jpg"</span><span style="color:rgb(255,0,0);"> alt</span><span style="color:rgb(0,0,255);">="鬱金香"</span><span style="color:rgb(255,0,0);"> height</span><span style="color:rgb(0,0,255);">="100px"</span><span style="color:rgb(0,0,255);">/&gt;</span></span></pre> </div> <p style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <span>效果前：<img alt="技術分享" src="http://images2015.cnblogs.com/blog/743207/201510/743207-20151010210219940-2033901786.png" style="overflow:hidden;"></span></p> <p style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <span>效果後：<img alt="技術分享" src="http://images2015.cnblogs.com/blog/743207/201510/743207-20151010210235081-1112521174.png" style="overflow:hidden;"></span></p> <p style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> &nbsp;</p> <p style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <span>2.在img標籤的父級上寫：font-size:0;//這個在解決display：inline-block出現的問題也有幫助</span></p> <div class="cnblogs_code" style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <pre style="font-family:'Microsoft YaHei';border:1px dotted rgb(170,170,170);"><span><span style="color:rgb(0,0,255);">&lt;</span><span style="color:rgb(128,0,0);">div </span><span style="color:rgb(255,0,0);">style</span><span style="color:rgb(0,0,255);">="font-size:0"</span><span style="color:rgb(0,0,255);">&gt;</span> <span style="color:rgb(0,0,255);">&lt;</span><span style="color:rgb(128,0,0);">img </span><span style="color:rgb(255,0,0);">src</span><span style="color:rgb(0,0,255);">="/i/eg_tulip.jpg"</span><span style="color:rgb(255,0,0);"> alt</span><span style="color:rgb(0,0,255);">="鬱金香"</span><span style="color:rgb(255,0,0);"> height</span><span style="color:rgb(0,0,255);">="100px"</span><span style="color:rgb(0,0,255);">/&gt;</span> <span style="color:rgb(0,0,255);">&lt;</span><span style="color:rgb(128,0,0);">img </span><span style="color:rgb(255,0,0);">src</span><span style="color:rgb(0,0,255);">="/i/eg_tulip.jpg"</span><span style="color:rgb(255,0,0);"> alt</span><span style="color:rgb(0,0,255);">="鬱金香"</span><span style="color:rgb(255,0,0);"> height</span><span style="color:rgb(0,0,255);">="100px"</span><span style="color:rgb(0,0,255);">/&gt;</span> <span style="color:rgb(0,0,255);">&lt;/</span><span style="color:rgb(128,0,0);">div</span><span style="color:rgb(0,0,255);">&gt;</span></span></pre> </div> <p style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <span>效果：<img alt="技術分享" src="http://images2015.cnblogs.com/blog/743207/201510/743207-20151010210235081-1112521174.png" style="overflow:hidden;"></span></p> <p style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> &nbsp;</p> <p style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <span>3.使用display：block(img是內聯元素)//要float一下才行</span></p> <div class="cnblogs_code" style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <pre style="font-family:'Microsoft YaHei';border:1px dotted rgb(170,170,170);"><span><span style="color:rgb(0,0,255);">&lt;</span><span style="color:rgb(128,0,0);">img </span><span style="color:rgb(255,0,0);">src</span><span style="color:rgb(0,0,255);">="/i/eg_tulip.jpg"</span><span style="color:rgb(255,0,0);"> alt</span><span style="color:rgb(0,0,255);">="鬱金香"</span><span style="color:rgb(255,0,0);"> height</span><span style="color:rgb(0,0,255);">="100px"</span><span style="color:rgb(255,0,0);"> style</span><span style="color:rgb(0,0,255);">="display:block"</span><span style="color:rgb(0,0,255);">/&gt;</span> <span style="color:rgb(0,0,255);">&lt;</span><span style="color:rgb(128,0,0);">img </span><span style="color:rgb(255,0,0);">src</span><span style="color:rgb(0,0,255);">="/i/eg_tulip.jpg"</span><span style="color:rgb(255,0,0);"> alt</span><span style="color:rgb(0,0,255);">="鬱金香"</span><span style="color:rgb(255,0,0);"> height</span><span style="color:rgb(0,0,255);">="100px"</span><span style="color:rgb(255,0,0);"> style</span><span style="color:rgb(0,0,255);">="display:block"</span><span style="color:rgb(0,0,255);">/&gt;</span></span></pre> </div> <p style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <span>效果:<img alt="技術分享" src="http://images2015.cnblogs.com/blog/743207/201510/743207-20151010210235081-1112521174.png" style="overflow:hidden;"></span></p> <p style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> &nbsp;</p> <p style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <span>4.使用letter-spacing屬性</span></p> <div class="cnblogs_code" style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <pre style="font-family:'Microsoft YaHei';border:1px dotted rgb(170,170,170);"><span><span style="color:rgb(0,0,255);">&lt;</span><span style="color:rgb(128,0,0);">div </span><span style="color:rgb(255,0,0);">style</span><span style="color:rgb(0,0,255);">="letter-spacing:-800px"</span><span style="color:rgb(0,0,255);">&gt;</span><span style="color:rgb(0,128,0);">&lt;!--</span><span style="color:rgb(0,128,0);">letter-spacing的值不管是負多少都不會產生重疊</span><span style="color:rgb(0,128,0);">--&gt;</span> <span style="color:rgb(0,0,255);">&lt;</span><span style="color:rgb(128,0,0);">img </span><span style="color:rgb(255,0,0);">src</span><span style="color:rgb(0,0,255);">="/i/eg_tulip.jpg"</span><span style="color:rgb(255,0,0);"> alt</span><span style="color:rgb(0,0,255);">="鬱金香"</span><span style="color:rgb(255,0,0);"> height</span><span style="color:rgb(0,0,255);">="100px"</span><span style="color:rgb(0,0,255);">/&gt;</span> <span style="color:rgb(0,0,255);">&lt;</span><span style="color:rgb(128,0,0);">img </span><span style="color:rgb(255,0,0);">src</span><span style="color:rgb(0,0,255);">="/i/eg_tulip.jpg"</span><span style="color:rgb(255,0,0);"> alt</span><span style="color:rgb(0,0,255);">="鬱金香"</span><span style="color:rgb(255,0,0);"> height</span><span style="color:rgb(0,0,255);">="100px"</span><span style="color:rgb(0,0,255);">/&gt;</span> <span style="color:rgb(0,0,255);">&lt;/</span><span style="color:rgb(128,0,0);">div</span><span style="color:rgb(0,0,255);">&gt;</span> </span></pre> </div> <p style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> <span>效果:</span><img alt="技術分享" src="http://images2015.cnblogs.com/blog/743207/201510/743207-20151010210235081-1112521174.png" style="overflow:hidden;"></p> <p style="font-family:'Microsoft YaHei';font-size:14px;color:rgb(63,63,63);line-height:30px;"> &nbsp;</p> <span style="color:rgb(63,63,63);font-family:'Microsoft YaHei';font-size:14px;">原文：http://www.cnblogs.com/zqzjs/p/4868325.html</span> </div> </div> </article>