情景
容器不设置高度，里面存有一张图片，假设图片高度是100px，则容器高度可能为103px，可能很多人都知道怎么去除这3px，但是你知道为什么图片下面会多出3px像素吗？
引出vertical-align属性
<div><span></span></div>
一个容器元素，里面有个空span，按照w3c规范，会形成一个高度为0的line-box，但是如果设置span为display: inline-block，span所形成的inline-box的高度依然是0，但line-box有了高度。参考w3c规范得知原因就在于line-box的行首有一个宽度为0的strut，strut撑起了line-box。
然后把span换成图片 <div><img src="" style="height: 100px;"></div>
此时容器高度为103px，为什么不是100px，因为vertical-align在起作用。
正是因为前面提及的strut与img相互作用导致的。
将strut想象成一个宽度为0的x字符，内容之间是baseline对齐，baseline是字符x的底部，而img的baseline就是图片的底部，于是x的底部和img的底部对齐，但是x因为line-height作用，实际占用区域是大于x本身的，即x的上下还会占用空间，这就导致img下面出现了间隙，这个间隙实际上是x占用的空间。
可以直接这样写 <div>x<img src="" style="height: 100px;"></div>，效果更明显
如何去除这个间隙
1、间隙是由x的内容区域超出了x的底部导致，那么缩小x的内容区域即可，x的内容区域大小由line-height控制，但不能直接设置x的line-height，因为x是虚拟的strut，其line-height继承自父容器div，因此将父容器的line-height变小，x的内容区域（content area）就变小，小到内容区域比x字符本身还小，下方间隙就没了。
2、font-size设为0，这个方法需要line-height关联font-size，如line-height：1.5，本质还是设置line-height
3、改变对齐方式，如top，bottom，middle对齐等，对齐方式改变了，也就不存在strut底部内容区域超出对齐线了
4、img快状化，直接占一行，不再生存line-box，没有了strut
