关于CSS样式

Question

下面这张图是三个图片，上中下排列：

代码很简单：

<div class="banner-con">
    <div class="advertcontain"><img class="advertimage" src="http://onxem9xtk.bkt.clouddn.com/blog/171222/DHeg4cIF0d.jpg?imageslim" alt="" /></div>
    <div class="advertcontain"><img class="advertimage" src="http://onxem9xtk.bkt.clouddn.com/blog/171222/FaGjL8EdA1.jpg?imageslim" alt="" /></div>
    <div class="advertcontain"><img class="advertimage" src="http://onxem9xtk.bkt.clouddn.com/blog/171222/6IL3Hj0i49.jpg?imageslim" alt="" /></div>
</div>

.advertimage{
    width: 100%;
}

想问的是，图片与图片之间为什么有条缝隙，包含块div都已经初始化过来，padding，margin什么的都是0,那两条缝隙是怎么来的？

Answer 1

图片属于替换元素，这是一个基线的问题。
可以通过外层div设置font-size:0;或line-height:0;
又可以通过内层img设置vertical-align:top/bottom/middle;或display:block;

Answer 2

img初始的display我记得是inline吧？

Answer 3

包裹img的div加上font-size:0,或者img vertical-align: top;