1.<img>元素底部有空白
首先，为何会有这段空白。
img是一个内联元素，它的display属性是inline，要理解为何img元素底部有空白，首先需要明白css对内联元素的vertical-align各个值的定义。
vertical-align属性的默认值是baseline，这是一个西文排版才有的概念：
可以看出，baseline的下面就是类似p，q，g这些字母的那个尾巴，
对比看一下vertical-align的另外两个常见的值，top和bottom
可以看出，baseline和bottom之间有一段距离，实际上，属性为display:inline的img图片下的空白正是baseline到bottom的距离，即使只有图片没有文字，属性值为inline的图片这段空白也会存在。
到这里就很明显了，想要去掉这段空白，最直接的办法就是把图片的vertical-align设置为其他值，如果在同一行有文字混排的话，使用bottom或者middle比较好。
在某些场景下，也可以把img的inline改为block，适用场景比较少吧
另外，top和bottom之间的值是line-height，如果吧line-height值设为0，吧baseline到bottom之间的距离也是0了，那段空白也就没有了，如果没有设置line-height，line-height的默认值是基于font-size的，视渲染引擎有所不同，但是一般是乘以一个系数，比如1.2，因此，在没有设置line-height的情况下也可以设置font-size为0也可以达到同样的效果。
深入理解vertical-align： https://www.cnblogs.com/starof/p/4512284.html?utm_source=tuicool&utm_medium=referral
http缓存的流程
https://segmentfault.com/a/1190000010690320
https://www.cnblogs.com/chinajava/p/5705169.html
http://www.cnblogs.com/chenqf/p/6386163.html
rfc 2016 https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html
