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

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

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