CSS解决div里面img图片下方有空白的问题

今天项目里面用到一个div下的img图片的下方有一小片明显的空白的问题，查了一下这个问题的原因，对img标签有了更加进一步的理解，原文：https://www.jianshu.com/p/2af064692505
产生这部分空白区域的原理。

图片的display属性默认是inline（我学习的时候是这样说的，不知道有没有上了堂假课），而这个属性的vertical-align的默认值是baseline。所以就会出现上图的情况（图片底部出现一个小留白区域）。

重点是解决方法：

方法一：把img变成块状元素，所以是否需要留白，可以用过padding来设置。

img {
    display: block;
}

方法二：既然分析到img的vertical-align默认属性导致出现留白问题，所以直接修改vertical-align属性值就行咯。

img {
    vertical-align: middle;
}

方法345感觉各自有缺陷，就不在这里列举了。总之知道是因为什么而引起这个问题就好解决了，有方法12就可以了。