vertical-align是与父元素的某个线对齐（top,middle,baseline,bottom），当有多个元素的情况下，是怎么对齐的呢？
答案就是：
1、没有设置对齐方式，大家默认都放在baseline这条线，就是各自的baseline会在一条线上。
2、设置了middle/baseline的情况下，自己的middle/baseline会和其他元素的baseline对齐
3、设置的top/bottm情况下，自己的top/bottom会和所有元素最高的top/最低的bottom对齐
下面我们来看例子：
A：默认baseline对齐
我们把两个inline-block放一起。
image.png
~~对了，下方空白问题不清楚请戳vertical-align问题（img下方空白及无法对齐）
B：左边设置middle，右边不设置
image.png
结果是：box1的middle线对齐父元素的baseline线（此例是box2的底部边缘）
box2还是对齐原来的baseline，所以不变。
C-1左边设置top，右边不设置
image.png
C-2左边设置bottom，右边不设置
image.png
为什么左边下方的空白不见了？是因为设置了baseline以外的值，空白节点不见了。
自身的bottom就是自身的下边缘了。而右边的空白节点还在。
以上~~~
