今天在开发前端页面的时候,发现在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>
这么一设置之后,空隙就会马上消失了。^ ^
谢谢您的观看!欢迎给我留言哦!