绝对定位div内图片底部出现小间隙的原因及解决办法

这个问题我之前也踩过坑！其实罪魁祸首是图片的行内元素默认特性——浏览器会把<img>标签当成类似文字的行内元素处理，默认会预留出一点基线对齐的空隙，哪怕你把margin、padding都设成0也没用。下面给你几个简单有效的解决办法：

方法1：将图片设置为块级元素 #

这是最直接也最推荐的方案，把图片从行内元素转为块级元素，就不会有基线空隙的问题了：

.adHolder img {
  width:100%;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:none;
  display: block; /* 新增这一行 */
}

方法2：修改图片的垂直对齐方式 #

既然空隙是基线对齐导致的，那我们直接改变图片的垂直对齐规则，比如设为底部对齐：

.adHolder img {
  width:100%;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:none;
  vertical-align: bottom; /* 换成top或middle也有效 */
}

方法3：给父容器设置字体大小为0 #

这个空隙本质上是行内元素的行高带来的，把父容器的font-size设为0，就能消除这个空隙（注意：如果父容器里还有其他文字内容，这个方法会让文字消失，只适合纯图片的容器）：

.adHolder {
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  padding:0;
  margin:0;
  z-index:1;
  font-size: 0; /* 新增 */
}

你可以根据自己的场景选其中一种，一般方法1是最稳妥的，不会有额外副作用。

内容的提问来源于stack exchange，提问作者Rooz Far