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

问题描述 投票:3回答:2

请运行演示:

* {
  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.textis a

  • 块容器元素,其内容由内联级元素组成
  • 高度为50px,线高为32px
  • 也是一个内联的非替换元素

这是我的问题:

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

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

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

  1. 如果你认为上面的盒子是高度为50px的盒子,你如何解释高度50px不是行高32px的事实?

请注意:

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

无论如何感谢您的帮助!

css vertical-alignment
2个回答
1
投票

该声明

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

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

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

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

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


0
投票

我猜你对于对齐的引用感到困惑(它与什么相对应?)。

我将尝试用简单的词语来解释这一点。当使用vertical-align与元素a时,你将它相对于它的父元素b对齐whataver是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>

正如你所看到的那样,内跨度与外跨度具有相同的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,因此计算出的值将为32px2 * font-size),这将使顶部引用与text-top不同。提醒一下,这是我与你的beforeref分享的一个数字:

如果我们阅读关于text-topvertical-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-height32px),它也是上图中顶部和底部之间的距离(最初它是从text-bottom覆盖到text-top)。

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

现在您还可以向元素添加特定的height,因为我们相对于父元素对齐,所以不会发生任何变化。你也可以玩vertical-align的所有vaues来看看不同的行为:

.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>
© www.soinside.com 2019 - 2024. All rights reserved.