vertical-align 基线也会变

基线并不是一成不变的，而是随机应变

简单说一下三种情况
父盒子里面有文本 文本的基线成为父盒子的基线

父盒子无文本 设置overflow hidden 父盒子基线在 margin-bottom [基线下移，底部对齐其他inline元素]

父盒子无文本 父盒子基线在 margin-bottom

这两个盒子没设置margin 相当于margin0 mb 就在框的底部

换一些对齐效果试一下

top在顶部，实现顶部对齐，两个框子也对齐了

Bottom在底部，也对齐了

两个盒子都遵守上面的规则1，忘了就再翻一下

设置top对齐，顶部对齐

因为文本并未改变top 和 bottom 位置
可以推测
bottom也和这个效果一样

果然，猜想正确。

因为vertical-align 含有两个属性 叫做 text-top text-bottom
内联盒子有自己的 top bottom baseline 【来源于 text】
text也有自己的基线
看一下
text-top 与父元素【第一行】字体顶端对齐
text-bottom 与父元素第一行字体底部对齐

查了一下text-top啥意思，元素顶端与父元素字体顶端对齐，那父元素还要加点料
为了防止两个框一开始文字对齐，对子元素使用overflow-hidden，让基线下移到底部
text-top

text-bottom