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>