img标签底部总是留有一条白色空隙

问题描述：

img标签底部总是留有白色空隙，仔细查了，不是多余的标签，也不是margin造成的，问题如下图：

造成此现象的原因：

img标签为行内元素，默认对其方式为vertical-align: baseline(基线对齐) 。图片默认的垂直对齐方式是基线，基线的位置与字体相关，所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 会造成这个空隙的高度大小。

网上查找资料后，整理出以下几种解决方案:（经试验，能有效解决问题）

方法一：

将img标签变成块级元素

img {

    display:block;

}

方法二：

修改vertical-align属性（推荐）

img{

    vertical-align：bottom；

}

方法三：

将img标签的父容器设属性：font-size: 0;

方法四：

对img添加属性float,如：

img{
  float:left;
}

方法五：（一种粗暴的方式）

对img的父级容器，添加属性overflow:hidden

img {
    height:120px;
}
div{
    height:120px;
    overflow: hidden;
}