css - 内联 block 非替换元素的对齐框

Question

请运行演示:

* {
  margin: 0;
  padding: 0;
}

.body {
  font-family: Microsoft Yahei;
  font-size: 16px;
  background-color: lightblue;
  height: 400px;
  width: 400px;
  line-height: 2;
  vertical-align: baseline;
}

.body span {
  background-color: pink;
}

.body .inline-block {
  display: inline-block;
  background: orange;
  height: 50px;
}

.inline-block.text {
  vertical-align: text-top;
}

<div class="body">
  <span>
words-g words words-g
  <span class="inline-block text">with inline-block box child</span> words-g w
  </span>
</div>

重点是我设置

.inline-block.text {
  vertical-align: text-top;
}

根据specification :

In the following definitions, for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side, see above). For all other elements, the box used for alignment is the margin box.

在“行高”部分:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. 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." (The name is inspired by TeX.).

所以，在这种情况下，.inline-block.text是一个

• 内容由行内元素组成的 block 容器元素
• 高度为50px，行高为32px
• 也是一个内联不可替换元素

这是我的问题:

the box used for alignment is the box whose height is the 'line-height'

1. 在这种情况下，.inline-block.text 上面的方框指向什么？

如演示所示，我认为是高度为 50px 的框。但是，盒子的高度不是行高，这与上面的规范冲突。所以，我一头雾水，看不懂规范中的上面这句话。

1. 如果你认为上面的框是高度为50px的框，你如何解释高度50px不是行高32px的事实？

请注意:

• 我只是想理解这句话是用于对齐的框是高度为'line-height'的框，这样我可以更好地理解vertical-align。

• 我不要求特定的解决方案。

谢谢你的帮助!

Answer 1

声明

for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height'

不适用于行内 block 。行内 block 不是行内元素。内联元素是带有display:inline的元素，生成内联框。行内 block 不是行内框，而是行内级别(“级别”部分很重要!) block 容器。因此，声明

For all other elements, the box used for alignment is the margin box.

适用，这会导致 vertical-align: text-top 导致内联 block 的顶部外边缘与行框的顶部对齐。

规范中适用于行内元素的任何部分不适用于行内 block 。