如何理解：如果inline-block元素里有内联元素，其基线就是元素里面最后一行内联元素的基线？

Question

学习大神的vertical-align和line-height问题总结，链接

如果行内块元素中包含有inline box,那么这个行内块元素的基线就是最后一行内联元素的基线，这句话是怎么理解的？

<span class="dib-baseline"></span>
<span class="dib-baseline demo">x-baseline</span>

   .dib-baseline {
      display: inline-block; width: 150px; height: 150px;
      border: 1px solid #cad5eb; background-color: #f0f3f9;
    }

jsfiddle中为什么第二个inline-block在包含了一个line-box后会下沉，代码：链接描述，为什么基线会变成那样？

Answer 1

首先要知道的是,inline-block元素的基线,由里面的元素决定,如果没有内联元素,则为inline-block元素的下边缘,如果有内联元素则为最后一行文字的基线.
又两个span元素同属于一个行框盒子(同一行),行框盒子的基线(行的基准线)是最高的内联元素的基线,所以该行的基线就是span元素(两个元素高度一致)的下边缘.
所以当第二个span的存在内容时,第二个span元素的基线为最后一行文字的基线,然后使用该元素的基线去对应行的基准线.