inline-block对齐，设置inline-block元素内容不同位置相互影响原因

对两个并列元素设置了display: inline-block; 以为他们的位置是这个样子

结果确是这个样子：

我们来看一下这个div的界限

发现，左边图片贴在div的顶部，右边气泡并没有贴着div的顶部，解决方法：
给两个inline-block元素加上以下属性：

vertical-align:top;

问题解决了，我们来思考为什么回出现这个问题，发现两个设置为inline-block的元素内容不同，一个是img标签，一个是div，div中有文字，然后我们来看一个简单的例子：

当div内容一样的时候，都是贴在父div的顶部，我们把一个div的内容去掉，发现变成了这个样子：

那为什么inline-block元素的位置会受到其内容的影响呢？我们可以查到这样一句话：inline-block元素可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。 对象仍然呈递为内联元素，而同一行内的内联元素默认是基于 baseline 对齐的，我们可以在图中标记出来：

为什么3个元素的方向不是相同的呢？为什么有内容的元素向下，而无内容的元素会向上呢？就此我们需要了解CSS渲染机制：对于一个inline-block元素，如果内部没有inline内联元素，或者overflow不是visible，则该元素的基线就是它margin的底边缘，否则就是元素内部最后一行内联元素的基线。

简单地就以上这种情况来说，没有内容的box2会基于它的margin底边缘也就是它的下边缘对齐，而包含内容的box1和box3会基于其内部内联元素的基线对齐，所以会造成这种一上一下的情况。

对此我们有多种解决办法：

1、暴力float，当然这是备选方案，毕竟脱离文档流后页面元素会不好控制
2、简单粗暴地给所有元素都加上内容，例如空格符
3、设置所有内联元素 vertical-align: top/middle/bottom; 属性，改变默认设置。

参考：https://www.cnblogs.com/jiangzilong/p/6145157.html