父元素的基线是怎么确定的

Question

vertical-align设置行内元素的基线相对于该元素所在行的基线的垂直对齐方式。
1.一个div中有一个inline-block，默认vertical-aglin：baseline

2.为什么设置粉色方框vertical-aglin：middle，父元素的基线怎么跑中间了？
粉色的中垂线和父元素baseline+1/2 x-height对齐，粉色的为什么不跑下去，而是让父元素基线跑上来？

Answer 1

1. 父元素的基线是字母x的底端。

2. vertical-aglin：baseline是元素基线与父元素的基线对齐。vertical-aglin：middle是元素中垂线与父元素的基线加上小写x一半的高度值对齐。所以不是父元素的基线变了，而是元素的对齐标准变了。

---

更新：
https://codepen.io/WhiteYin/p...
写了个demo对比下两种情况。
通过隐藏粉色div，你可以发现父元素basaline+1/2 x-height的位置一直是没有变化的。
只不过粉红div显示后父元素高度会变高。

Answer 2

真的上移了吗？我还是觉得实际上基线不变，而行内的元素跟着基线在跑。