多个元素的情况下vertical-align的对齐方式

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就是自身的下边缘了。而右边的空白节点还在。

以上~~~