"parent inline element" 是什么意思？

Question

关于 vertical-align，W3C 规范 says：

The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.

这里的parent inline element是什么意思？它是容器内的第一个内联元素吗？如果是，为什么叫“parent”？

Answer 1

我认为最好用一个例子来解释。

.bar {
  vertical-align:-20px;
}
.baz, .qux {
  vertical-align: text-top;
  line-height:30px;
}

  <div>foo
    <span class="bar">bar
      <span class="baz">baz</span>
    </span>
    <span class="qux">qux</span>
  </div>

所有跨度和文本内容都是单个行框的一部分。 div 建立内联格式化上下文、行框及其支柱。

“foo”文本位于相对于支柱基线的基线上。 .bar 跨度相对于支柱的基线偏移了 20px。 .baz 和 .qux 跨度具有相同的样式，其中它们的上半部分前导的顶部与其“父级”的内容区域的顶部对齐。但是你可以看到它们并没有对齐。

那是因为 .qux span 是相对于 strut 对齐的，但是 .baz 是相对于它的 parent inline element 对齐的，即是 .bar 跨度元素。