HTML中img标签会出现下边距，底部距离下一个元素会有一小段距离

有时做网页的时候会遇到一个小坑：img图片会有一个下边距。

//CSS这样设置都不管用
padding:0;
margin:0;

参考了一些文章，是这么解释的

图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。

解决方法如下：

//给img添加如下css
vertical-align: middle; //在IE6中大概还有一像素的顶边距，最好为top或bottom

或者

//给img的父容器添加如下css（比较极端）
font-size:0; //设置字体大小为0

很多问题谷歌或者百度都能解决，但是文章太多太杂，坑不少，做一个记录，希望能能帮到大家。