去掉img图片底部的空白的3种通用方法

效果如图：

图片下方有莫名的空白，总是去不掉！

空白产生的原因：图片是内联元素，默认带有一定的间距，间距与文字字体有一定的关系。

因此，基于此原因有一下解决方法：

方法一

把图片变成区块元素

方法二

给内联元素的图片加垂直对齐方式：

• vertical-align: top | middle | bottom;

方法三

把上级元素的字体大小改成0像素

搞定！

是不是很简单！

推荐我开的课程给大家学习：
H

1. 2020年新前端实战-HTML5精细化教程
2. 2020年新前端实战-CSS3精细化教程