内联块非替换元素的对齐框

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.

并且在 'line-height' 部分：

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是一个

内容由行内元素组成的块状容器元素
高度为50px，行高为32px
也是一个内联非替换元素

这是我的问题：

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

在这种情况下 .inline-block.text 上面的方框点是什么？

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

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

请注意：

我只是想理解这句话是用于对齐的框是高度为'line-height'的框，所以我可以更好地理解垂直对齐。
我不要求具体的解决方案。

谢谢你的帮助！

Answer 1

我猜你对对齐的参考感到困惑（它相对于什么对齐？）。

我会尽量用通俗易懂的话来解释。当将 vertical-align 与元素 a 一起使用时，您将其相对于其父元素 b 什么是 a 的高度 （b 是参考）。使用正确的词是这样的：

The vertical-align property can be used in two contexts:

To vertically align an inline element's box inside its containing line box. For example, it could be used to vertically position an <img> in a line of text.^ref

所以a元素是行内元素的框而b元素是包含行框 并且 b 的高度由它的 line-height 定义，正如您已经在规范中阅读的那样。

现在让我们考虑您的代码并逐步添加属性。

首先让我们删除 inline-block

.body {
  font-family: Microsoft Yahei;
  font-size: 16px;
  background-color: lightblue;
}

.body span {
  background-color: pink;
}

.body .inline-block {
  background: orange;
}

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

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

如您所见，内部跨度与外部跨度具有相同的 height/line-height，并且两者都使用相同的 font-family。所以从逻辑上讲，当使用 text-top 作为垂直对齐方式时，我们什么也看不到。

现在让我们将line-height:2添加到容器中：

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

.body span {
  background-color: pink;
}

.body .inline-block {
  background: orange;
}

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

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

在这种情况下，两个跨度都将继承 line-height:2，因此计算值将是 32px（2 * font-size），这将使顶部引用不同来自文本顶部。提醒一下，这是我之前分享给大家的一张图^ref:

如果我们阅读关于 vertical-align 的值 text-top 的定义：

Aligns the top of the element with the top of the parent element's font.

因此内部跨度的顶部将与外部跨度的文本顶部对齐，这就是它移动到底部的原因。然后主容器的高度 .body 不会等于 32px 但它会更大，因为它会考虑内部跨度的移动（我们将有 37px）。

现在让我们将 inline-block 添加到内部元素：

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

.body span {
  background-color: pink;
}

.body .inline-block {
  background: orange;
}

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

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

您首先会注意到文字没有移动，但橙色背景覆盖了更大的高度。这是因为我们的元素将表现为块容器，并且此高度是文本的 line-height (32px)，这也是上图中顶部和底部之间的距离（最初它覆盖了text-bottom 到 text-top).

它也像 .body 元素的蓝色背景，因为这是块元素。 尝试制作 .body 元素 inline 看看会发生什么。

现在您还可以向元素添加特定的 height，并且不会有任何变化，因为我们相对于 父元素 对齐。您还可以使用 vertical-align 的所有值来查看不同的行为：

.body {
  font-family: Microsoft Yahei;
  font-size: 16px;
  background-color: lightblue;
  line-height:2;
  margin:5px;
}

.body span {
  background-color: pink;
}

.body .inline-block {
  background: orange;
}

.inline-block.text {
  display:inline-block;
  height:50px;
}

<div class="body">
  <span>
Align the 
  <span class="inline-block text" style="
  vertical-align: text-top;">top of this</span> with text-top
  </span>
</div>

<div class="body">
  <span>
Align the 
  <span class="inline-block text" style="
  vertical-align: top;">top of this</span> with top
  </span>
</div>

<div class="body">
  <span>
align the 
  <span class="inline-block text" style="
  vertical-align: text-bottom;">bottom of this</span> with text-bottom
  </span>
</div>

<div class="body">
  <span>
align the 
  <span class="inline-block text" style="
  vertical-align: bottom;">bottom of this</span> with bottom
  </span>
</div>

Answer 2

声明

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

不适用于行内块。行内块不是行内元素。内联元素是带有display: inline的元素，生成内联框。 inline-blocks 不是 inline boxes，而是 inline-level（“-level”部分很重要！）block container boxes。因此，语句

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

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

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

内联块非替换元素的对齐框

alignment box for inline-block non-replaced elements

css

vertical-alignment