IMG图片下面出现空格、下边距的解决办法

放图片的时候总有一个间隔，加上div看，是图片未充满div。最后父级元素加了一个 font-size:0，去掉了间隔。

<div class="cut-img" style="font-size:0;"> 
　　<img src="images/bg_dot.png" class="center-img"></img>
</div> 

　　

详情：

http://blog.csdn.net/yourlin/article/details/42024665

在不同浏览器下图片下面会出现莫名的下边距，经测算在FF中 下边距大概是多出了3像素左右，而IE6更多，在IE8中展示却是完好的，以往的做法只需要将img定义为块状级就解决了问题；
    但其原理是：图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关 的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。
    如果将图片的垂直对齐方式设置为 top 或 bottom，我们会发现这个空隙也会消失。
    行内元素的格式化实际上比我们想像的要复杂得多，这也是我至今不愿面对的一个知识点。还好它并不常用。

    ps: 解决办法给img定义vertical-align或者定义为块状，最优的解决办是定义vertical-align，注：定义vertical- align为middle时在IE6中大概还有一像素的顶边距，最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 父容器的字体大小为零，font-size:0。

解决方法：

1.将img块状化   ul li img{display:block;}

2.将img左浮动   ul li img{float:left;}

3.为img添加样式 ul li img{vertical-align:top|bottom|text-top|text-bottom;}

4.为img的父级加高度 ul li{height:120px;}

5.为img的父级加样式 ul li{font-size:0;}

 

转载于:https://www.cnblogs.com/yeyuchangfeng/p/5708577.html