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”部分：

在内容由内联级元素组成的块容器元素上，“line-height”指定元素中线框的最小高度。最小高度包括基线上方的最小高度和其下方的最小深度，就像每个线框以零宽度内联框开头一样，其中包含元素的字体和线高属性。我们称这个想象的盒子为“支柱”。（这个名字的灵感来自TeX。）。

因此，在这种情况下，.inline-block.text是

阻止其内容由内联级元素组成的容器元素
，其高度为50px，行高为32px
也是内联非替换元素

这是我的问题：

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

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

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

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

请注意：

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

感谢您的帮助！

Answer 1

声明

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

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

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

而应用

会导致vertical-align: text-top导致内联块的顶部外边缘与线框的顶部对齐。

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

Answer 2

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

我将尝试用简单的词语来解释这一点。将vertical-align与元素a一起使用后，您将其与其父元素b对齐 whataver a的高度（{{1}是参考）。用正确的词语是这样的：

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

在包含行内垂直对齐内联元素框   的框即可。例如，它可用于垂直定位b   一行文字。^ref

因此<img>元素是内联元素框，a元素是包含行框和高度b的定义由您在规范中已阅读的 line-height 定义。

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

最初，请删除b

＆＃13;

inline-block

＆＃13;

.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;
}

＆＃13;

正如您所看到的，内部跨度与外部跨度具有相同的<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添加到容器中：

＆＃13;

line-height:2

＆＃13;

.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;
}

＆＃13;

在这种情况下，两个范围都将继承<div class="body"> <span> words-g <span class="inline-block text">inline-block</span> words-g w </span> </div>，因此计算出的值将为line-height:2（32px），这将使顶级参考不同从文本顶部。为了提醒一下，这是我在之前与^ref分享的数字：

Location of the baseline on text

如果我们阅读有关2 * font-size的值text-top的定义：

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

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

现在让我们将37px添加到内部元素：

＆＃13;
＆＃13;
inline-block
＆＃13;
.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; }
＆＃13;
＆＃13;
＆＃13;

你会注意到的第一件事是文本没有移动但是橙色背景覆盖的高度更高。这是因为我们的元素将表现为块容器，此高度是文本的<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的所有视图来查看不同的行为：

＆＃13;
＆＃13;
vertical-align
＆＃13;
.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; }
＆＃13;
＆＃13;
＆＃13;

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

2 个答案: