<img>元素底部为何有空白？

1 概述

现代浏览器中，<img>元素默认情况下底部会有空白，那么这个空白到底是从哪里来的？
有什么比较好的方法可以去掉这个空白？

2 为什么会有这个空白

要理解这个问题，首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline，这是一个西文排版才有的概念：
在这里插入图片描述
可以看到，出现在baseline下面的是 p 啊，q 啊, g 啊这些字母下面的那个尾巴。
对比一下 vertical-align 的另外两个常见值，top 和 bottom:

可以看到，baseline 和 bottom 之间有一定的距离。实际上，inline 的图片下面那一道空白正是 baseline 和 bottom 之间的这段距离。即使只有图片没有文字，只要是 inline 的图片这段空白都会存在。

到这里就比较明显了，要去掉这段空白，最直接的办法是将图片的 vertical-align 设置为其他值。如果在同一行里有文字混排的话，那应该是用 bottom 或是 middle 比较好。

另外，top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0，那么 baseline 与 bottom 之间的距离也变为0，那道空白也就不见了。如果没有设置 line-height，line-height 的默认值是基于 font-size 的，视渲染引擎有所不同，但一般是乘以一个系数（比如1.2）。因此，在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然，这样做的后果就是不能图文混排了。

3 解决办法

方法一，设置img为display：block
方法二，设置img的 vertical-align:top/bottom/middle; 常用
方法三，设置父元素line-height: 0;
方法四，设置父元素font-size: 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
     
     
            border: 5px solid #000;
            line-height: 0;  /* 方法三，line-height: 0; */
            font-size: 0;  /* 方法四，font-size: 0; */
        }
        img{
     
     
            display: block;  /* 方法一，设置img为display：block */
        }
        img{
     
     
            vertical-align: bottom;  /* 方法二，设置img的 vertical-align:top/bottom/middle;  */
        } 
    </style>
</head>
<body>
    <div>
        <img src="http://b-ssl.duitang.com/uploads/item/201203/11/20120311132147_vfZv4.jpeg" alt="" srcset="">
    </div>
</body>
</html>

以上博文部分来自知乎大佬尤雨溪，感谢！