本文主要是介绍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;
}
这篇关于img标签底部总是留有一条白色空隙的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
