这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战
为什么图片总是对不齐呢？
当别人问起来这个问题的时候，我先是一愣，随后直接google.com一个链接，转发过去，完事儿！
但是话说回来了，这个东西到底是为什么呢？本着打破砂锅问到底的原则，惨案由此揭开序幕。
复现问题
<!-- html -->
<div>
<img src="./image.png" />
</div>
<!-- css -->
<style>
div {
border: 1px solid #000;
}
img {
width: 200px;
}
</style>
探秘：空白从何而来
要弄明白空白从何而来，我们要先知道，div的高度是怎么计算的？W3C是这么说的：
The line box height is the distance between the uppermost box top and the lowermost box bottom.(This includes the strut).
大意就是说，line box的高度就是从该行子元素最顶端到最低端的高度。其中包括了strut，家人们注意啊，这个东西很重要。下方给大家配了个图：
最顶端到最低端的高度保证了line box能够包裹所有的子元素
那么我们继续来回到刚才的问题：div为什么比img要高出来一丢丢呢？这个一丢丢从哪里来的？
它的一丢丢肯定不是平白无故多出来的，是由strut引起的：
- 当
block元素内部含有inline-block元素时，block元素最前面会有一个strut(有些人称其为幽灵节点)。多出来的一丢丢就是strut的一部分，注意是一部分，不是全部。 - 当
inline元素内部不包含文本时,inline元素前面也会有一个strut。
到目前为止，你需要知道的是：这个空白是由strut引起的，如何引起的请继续往下看。
Strut 怎么带出来的空白
当我把img的src属性删除后，会神奇的发现，div竟然还有高度。
没错，此时此刻div的高度就是strut的高度，先上一张图来展示空白如何而来：
相信聪明的小伙伴已经看透问题的本质了，多出来空白的原因是因为两个子元素没有对齐，是滴，inline-block的vertical-align属性默认是baseline。而baseline下方还会有一些留白部分，因此会多出来一部分空白。
真的是多出来的空白吗？
其实我们只要加一些文本，看文本下方的空白和图片下方的空白是不是一样的就可以啦。
如果是一样的，就证明我说的是对的，图片下方多出来的空白是strut下方的空白。
vertical-align
既然问题已经找到了，那么只要对症下药就可以了，用vertical-align就可以了。
我们只需要在img上改变vertical-align属性的值就可以了。
但是关于middle这个值：我想说一点就是，middle并不是真正的middle，W3C规范规定middle是中间再加一个x-height的高度，而-webkit-baseline-middle是真正的中间。
下面做两个实验给大家看一下：
最后
文章到这里已经结束了，感谢大家的观看，希望本文能够对你有所帮助，有什么不懂的地方可以在下方评论留言。
