一个行框内有多个行内框的时, 行框的基线如何确定?

Question

vertical-align属性. 指的是行内元素与行框基线的对齐方式, 那当一个行框内有多个行内框, 且各个行内框高度不一致时, 是如何计算行框的baseline的?

Answer 1

这个还真的不好说，CSS 标准里并没有明确的规定如何计算：

When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the 'vertical-align' property.

The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.2 does not define the position of the line box's baseline.

The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."

标准里没有明确的规定怎么计算，也提到可能会有多种解。

从个人经验来说，基本上就是在满足规定的对齐的情况下，使得行框最低。
对于单一的元素：

1. 文字的 baseline 就不说了。

2. 对于 img 其 baseline 是图片的低边框。

3. 对于 inline-block，如果其中有行框(子孙元素中的行框一起算)，其 baseline 是最后一个行框的 baseline，如果没有，inline-block 的 baseline 就是这个 box 的margin 下边缘。

一个行框的baseline位置是：

1. 如果其中有 baseline 对齐的元素，那么行框的 baseline 就是这些元素的 baseline。

2. 如果没有，那么就假设其中有一段文字(继承字体字号等)，那就是它的 baseline

大概就是这个样子，个人经验，可能不准确，而且不同浏览器也可能不同。

Answer 2

对于行框的baseline,应该说其是相对固定不变的，判断方法就是这个行框里直接写个字母x,行框的baseline就是x的底部，这个x是不包含在任何其他子标签里面的，行框的baseline永远相对于这个x不变。举个例子
<div>x<span>xspan</span></div> 这里div里的行框就是字母x的底部，不是xspan里x的底部。行框里的多个行内框只要是基线对齐的，都会和这个x底部对齐，top bottom会和高度最大的行内框的top bottom对齐。张鑫旭大神讲的幽灵节点就是指这个隐形的x。具体的可以看这个 确定line box的baseline