img底部留白问题

产生原因

有时候，我们在添加图片img标签后并没有给该标签设置magrin属性的margin-bottom值，在浏览器中打开就会出现图像底部留白，为什么为造成这个原因？

下面就来进行分析：由于img元素默认为inline-block元素（有inline元素特点），而inline元素的vertical-align属性的默认值为baseline文字基线对齐，正好图片底部的留白就是baseline和bottom之间的距离，如图：

 

解决办法 

使用vertical-align，推荐

img{
    vertical-align: middle;   /* 对其方式设置为底部对其 */
}

 

 

其他处理方法：

1 把父元素的font-size设置为0；

2 把图片的display设置为block；

3 把图片绝对定位；