去除图片底部空隙的方法总结

废话不说，直接看问题：

问题产生的原因：

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

以下消除办法：

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

1.设为block

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

img{
	display:block;
}

2.设置vertical-align

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

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

3.设置float

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

4. 设置负margin

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

img{
	margin-bottom: -5px;
}

5.固定父元素高度

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

上述四种方法亲测都能解决问题，欢迎补充，指正。正确的效果为：

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