img 底部空白原因以及解决方法

浏览器渲染 img 时，下方会有一些空白。本文记录自己整理的产生原因以及解决方法。

产生原因

 img 属于 inline 元素，inline 因为受到字号和行间距的影响底部留出了一段距离，距离与字体大小有关。图解：

也有大佬这样解释：

唯一疑惑可能因为他说了句“img和其他元素并列的时候这句”，但是我只写了一个img也有这个空白（我是不是钻牛角尖了...）

解决方法

1. 给父元素加 font-size: 0px (好像只能是 0 px 别的都还会有空白)
2. 给父元素加 line-height: 0 
3. 将 img 设为块级元素
4. 改变 img 的 vertical-align: middle;（bottom）

简单整理，方便查看。