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

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：

在以下定义中，对于内联非替换元素，用于对齐的框是高度为“line-height”的框（包含框的字形和半前导每一面，见上文）。对于所有其他元素，用于对齐的框是边距框。

在“行高”部分：

在内容由行内元素组成的块容器元素上，'line-height' 指定元素内行框的最小高度。最小高度由基线上方的最小高度和基线下方的最小深度组成，就像每个行框都以具有元素字体和行高属性的零宽度行内框开始一样。我们称那个假想的盒子为“支柱”。 （这个名字的灵感来自 TeX。）。

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

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

这是我的问题：

用于对齐的框是高度为'line-height'的框

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

正如演示所示，我认为它是高度为 50px 的框。但是，盒子的高度不是与上述规范冲突的行高。所以，我很困惑，不明白规范中的上述句子。

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

请注意：

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

• 我不是要求一个具体的解决方案。

感谢您的帮助！

Answer 1

声明

对于内联不可替换元素，用于对齐的框是高度为'line-height'的框

不适用于内联块。内联块不是内联元素。内联元素是带有display: inline 的元素，并生成内联框。内联块不是内联框，而是 inline-level（“-level”部分很重要！）块容器框。因此，声明

对于所有其他元素，用于对齐的框是边距框。

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

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

Answer 2

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

我将尝试用简单的话来解释这一点。当将vertical-align 与元素a 一起使用时，您会将其相对于其父元素b 对齐whataver 是a 的高度（b 是参考）。使用正确的话是这样的：

vertical-align 属性可以在两种情况下使用：

在其包含行内垂直对齐内联元素的框 框。例如，它可以用于将<img> 垂直定位在 一行文字。^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>

在这种情况下，两个 span 都将继承 line-height:2，因此计算的值将是 32px (2 * font-size)，这将使顶部引用与 text-top 不同。提醒一下，这是我之前分享给你的一张图^ref：

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

将元素的顶部与父元素的顶部对齐 字体。

所以内部跨度的顶部将与外部跨度的文本顶部对齐，这就是它移动到底部的原因。那么主容器的高度.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>