如何理解：如果inline-block元素里有内联元素，其基线就是元素里面最后一行内联元素的基线？
学习大神的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后会下沉，代码：链接描述，为什么基线会变成那样？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
首先要知道的是,inline-block元素的基线,由里面的元素决定,如果没有内联元素,则为inline-block元素的下边缘,如果有内联元素则为最后一行文字的基线.
又两个span元素同属于一个行框盒子(同一行),行框盒子的基线(行的基准线)是最高的内联元素的基线,所以该行的基线就是span元素(两个元素高度一致)的下边缘.
所以当第二个span的存在内容时,第二个span元素的基线为最后一行文字的基线,然后使用该元素的基线去对应行的基准线.