关于CSS中内联元素对齐问题（line-height && vertical align）

Question

 <div style="background-color: orange; display: inline-block">
        <div style="display: inline-block; font-size: 40px; background-color: blue;">xxXXAABB</div>
        <div style="display: inline-block; font-size: 80px; background-color: red;">xxXXAABB</div>
        <div style="display: inline-block; font-size: 80px; background-color: green; vertical-align: middle;">xxXXAABB</div>
    </div>

请问上面代码显示效果中为什么第三个子div会比前两个低一点？

Answer 1

xxXXAABB

    <div style="display: inline-block; font-size: 80px; background-color: red;">xxXXAABB</div>
    <div style="display: inline-block; font-size: 100px; background-color: green; vertical-align: middle;">xxXXAABB</div>
    <div style="display: inline-block;  background-color: blue;">xxXXAABB</div>
</div>

在w3c上 vertical-align的定义是这样的 :该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
首先行内元素的基线 :经过测试,行内元素的基线就是 不设定字体大小的时候 字母下方的线
元素的基线 就是字母下方的线 第四个子div就是 参考,无论第三个div字体大小怎么改变 ,基线 一致在中间位置