解决div下放img标签，会出现空隙的情况

今天在开发前端页面的时候，发现在div下放一个img元素时，会有2px左右的空隙。

代码如下：

<span style="font-family:SimHei;font-size:14px;color:#009900;"><div class="banner">
     <img class="banner__Bg" src="images/banner__bg--01.png" alt=""></img>
</div></span>

div.banner的尺寸如下：

而img.banner__Bg的尺寸则如下：

从上图我们可以发现，div.banner的高为129px，而img.banner__Bg的高则为：127px。

经过调试，最终发现原因：img在默认的情况下是一个类inline-block的元素。

而inline-block元素它是会自带一些边距的，具体原因有待考察。

因此在div里面放一个img而不设置它的display的时候，img的空隙就会把div撑开。

因此，解决的方法是：

给img.banner__Bg加上：

<span style="font-family:SimHei;font-size:14px;color:#cc0000;">img.banner__Bg{
     display: block;
}</span>

这么一设置之后，空隙就会马上消失了。^ ^

谢谢您的观看！欢迎给我留言哦！