废话不说,直接看问题:
图片底部空隙

问题产生的原因:

该空隙既不是图片的默认margin,也不是border,而是因为<img>标签与生俱来的特性,因为其属于行内元素,而行内元素默认的对齐方式是基线对齐,关于基线对齐以后另写文章解释,这里先借用网上一张图来说明:
图片底部空隙
以下消除办法:

1
2
3
4
<div>
<img src="./test.jpg" />
<p>插秧哥的博客</p>
</div>

1.设为block

既然是行内元素的默认行为,那么使其设置为块级元素自然就好:

1
2
3
img{
display:block;
}

2.设置vertical-align

既然垂直方向对齐方式是默认的是baseline基线对齐,那么就设置其为非基线对齐,在vertical-align的这么多属性值当中亲测好使的有top,text-top,middle,bottom

1
2
3
img{
vertical-align: top; //text-top middle bottom
}

3.设置float

如果条件允许,你也可以设为浮动元素,使其脱离文档流,也能消除底部空隙。

4. 设置负margin

设置图片margin-bottom为负值也可以解决该问题,设为负margin后,底部元素自然就能顶上来,注意:具体margin-bottom值并不是传说中的-3px,我的情况是-5px:

1
2
3
img{
margin-bottom: -5px;
}

5.固定父元素高度

此法较为笨拙,但也能解决问题,那就是把父元素的高度和图片的高度保持一致(写死)。

上述四种方法亲测都能解决问题,欢迎补充,指正。正确的效果为:
图片底部空隙

总结:此问题牵扯到 行内元素,基线,vertical-align,line-height相关知识,问题只是现象,背后的原理才是问题的根本来源,后续补充上述内容。