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

Question

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

3

请运行演示：

* {
  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;
}

根据规范:

在以下定义中，对于行内非替换元素，用于对齐的框是高度为“行高”的框（包含框的字形和每侧的一半行间距，请参见上文）。对于所有其他元素，用于对齐的框是边距框。

并且在“行高”部分中：

在由内联级别元素组成的块容器元素上，“行高”指定了元素内行框的最小高度。最小高度由基线上方的最小高度和基线下方的最小深度组成，就像每个行框都以具有元素字体和行高属性的零宽度内联框开始一样。我们称这个虚拟框为“支撑结构”。（名称受 TeX 启发）。

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

块级容器元素，其内容由内联级别元素组成
高度为50像素，行高为32像素
同时也是一个内联非替换元素

这是我的问题：

用于对齐的框是高度为“行高”的框

在这种情况下，上述框指的是什么？对于 .inline-block.text 来说是什么？

正如演示所示，我认为它是高度为50像素的框。然而，该框的高度不是行高，这与上面的规范相矛盾。因此，我感到困惑，并且不理解规范中的上述句子。

如果您认为上述框是高度为50像素的框，那么您如何解释高度50像素不等于行高32像素的事实？

请注意：

我只是想理解这个句子，即用于对齐的盒子是高度为“行高”的盒子，这样我就可以更好地理解垂直对齐了。
我不要求具体的解决方案。

无论如何，感谢您的帮助！

- xianshenglu

2个回答

0

我猜你可能对对齐方式的参考对象感到困惑（它是相对于什么对齐的？）。

我会尝试用简单的语言来解释。当使用vertical-align属性与元素a一起使用时，您将其与父元素b相对齐，无论a的高度如何（b是参考）。用正确的术语来说，就像这样：

vertical-align属性可以在两个上下文中使用：

将内联元素框垂直对齐到其包含行框中。例如，它可以用于在文本行中垂直定位<img>。^ref

因此，a元素是内联元素框，b元素是包含行框，b的高度由其行高定义，正如您已经在规范中阅读的那样。

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

首先，让我们删除“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>

正如您所看到的，内部span与外部span具有相同的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），这将使顶部参考与文本顶部不同。为了提醒大家注意这一点，这里有一个我之前分享过的图示^ref:

Location of the baseline on text

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

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

因此，内部的顶部将与外部的文本顶部对齐，这就是为什么它会移动到底部。然后，主容器.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>

- Temani Afif

谢谢你的回答。但我认为你没有理解我的问题重点。你可以看到另一个回答，那就是我想要的。然而，他没有找到具体的定义。我现在正在向CSS工作组询问“内联元素”的定义。 - xianshenglu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

该语句

对于内联非替换元素，用于对齐的框是高度为“行高”的框

不适用于内联块。内联块不是内联元素。内联元素是具有 display: inline 并生成内联框的元素。内联块不是内联框，而是 内联级别（"-level" 部分很重要！）块容器框。因此，应用语句

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

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

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