为什么垂直对齐：文本顶部使元素下降？

Question

我对使用垂直对齐属性感到困惑。它是如何工作的？如果您向我解释它是如何工作的，我将不胜感激：） 为什么该属性的工作方式不同？在第一种情况下，我尝试通过垂直对齐来对齐我的文本：文本顶部，但是......我的文本下降了。为什么？ 在第二种情况下，我通过 vertical-align: text-top 对齐我的正方形，这个属性可以正常工作。有什么不同？为什么我的文字下降而不是上升？

body {
  font-family: sans-serif;
  font-size: 30px;
}

p {
  display: table-cell;
  background: yellow;
  width: 700px;
  height: 500px;
  vertical-align: baseline;
  line-height: 50px;
}


.three {
  vertical-align: text-top;
}
  

.block {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: pink;
  border: 2px solid black;
  vertical-align: text-top;
}

<div>
  <p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> background <span class="block"></span></p>
</div>

Answer 1

^{参考：https://www.w3.org/TR/CSS2/visudet.html#line-height}

要理解这一点，你需要首先考虑text-top的定义：

以下值仅对父内联元素或父块容器元素的支柱有意义。

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

然后

文本顶部

将框的顶部与父级内容区域的顶部对齐

所以我们需要识别框的顶部和父内容区域的顶部

如果我们添加一些装饰，我们可以很容易地识别它们

body {
  font-family: sans-serif;
  font-size: 30px;
}

p {
  background: yellow;
  line-height: 50px;
  background:
   linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
   yellow;
}

p span {
  background:green;
}

.three {
  vertical-align: text-top;
  background:red;
}
  

.block {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: pink;
  border: 2px solid black;
  vertical-align: text-top;
}

<div>
  <p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> <span>background</span> <span class="block"></span></p>
</div>

绿色定义了内容区域，我们可以清楚地看到正方形与顶部对齐。到现在为止都是微不足道的。

棘手的情况是文本，因为我们看到红色与绿色不对齐。这是由于line-height。上面说我们考虑高度为line-height 的框，我们知道line-height 是继承的，所以我们的跨度（红色的）将继承50px 的行高，这是我们对齐的参考。

更棘手的是，即使我们改变行高，内容区域也不会改变（红色始终保持不变）

“高度”属性不适用。 内容区域的高度应以字体为准

和

内联非替换框的垂直内边距、边框和边距从内容区域的顶部和底部开始，与“行高”无关。 但在计算线框高度时只使用了'line-height'。

为了简单起见，想象一下高度等于50px 的不可见框内的文本，并且该框与父内容区域的顶部对齐，然后在该框内你有你的文本，背景颜色只会覆盖内容区域，不管行高。

如果您使用等于内容区域的line-height，您将获得完美对齐：

body {
  font-family: sans-serif;
  font-size: 30px;
}

p {
  background: yellow;
  line-height: 50px;
  background:
   linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
   yellow;
}

p span {
  background:green;
}

.three {
  vertical-align: text-top;
  background:red;
  line-height:33px;
}
  

.block {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: pink;
  border: 2px solid black;
  vertical-align: text-top;
}

<div>
  <p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> <span>background</span> <span class="block"></span></p>
</div>

增加line-height，您将有一个更大的不可见框，文本将向下移动更多：

body {
  font-family: sans-serif;
  font-size: 30px;
}

p {
  background: yellow;
  line-height: 50px;
  background:
   linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
   yellow;
}

p span {
  background:green;
}

.three {
  vertical-align: text-top;
  background:red;
  line-height:100px;
}
  

.block {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: pink;
  border: 2px solid black;
  vertical-align: text-top;
}

<div>
  <p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> <span>background</span> <span class="block"></span></p>
</div>

从逻辑上讲，行高很小，它会上升：

body {
  font-family: sans-serif;
  font-size: 30px;
}

p {
  background: yellow;
  line-height: 50px;
  background:
   linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
   yellow;
}

p span {
  background:green;
}

.three {
  vertical-align: text-top;
  background:red;
  line-height:1px;
}
  

.block {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: pink;
  border: 2px solid black;
  vertical-align: text-top;
}

<div>
  <p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> <span>background</span> <span class="block"></span></p>
</div>

---

如果您将显示更改为inline-block，您会更好地看到问题，因为颜色将覆盖line-height 定义的整个区域

body {
  font-family: sans-serif;
  font-size: 30px;
}

p {
  background: yellow;
  line-height: 50px;
  background:
   linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
   yellow;
}

p span {
  background:green;
}

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

.block {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: pink;
  border: 2px solid black;
  vertical-align: text-top;
}

<div>
  <p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> <span>background</span> <span class="block"></span></p>
</div>

通过更多元素，我们可以更好地说明我们的隐形框：

body {
  font-family: sans-serif;
  font-size: 30px;
}

p {
  background: yellow;
  line-height: 50px;
  background:
   linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
   yellow;
}

p span {
  background:green;
}

.three {
  vertical-align: text-top;
  outline:1px solid blue;
  background:transparent;
  display:inline-block;
}
.three > span {
  background:red;
}
  

.block {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: pink;
  border: 2px solid black;
  vertical-align: text-top;
}

<div>
  <p><span class="one">I'm</span> <span class="two">on the</span> <span class="three"><span>yellow</span></span> <span>background</span> <span class="block"></span></p>
</div>

<div>
  <p><span class="one">I'm</span> <span class="two">on the</span> <span class="three" style="line-height:100px"><span>yellow</span></span> <span>background</span> <span class="block"></span></p>
</div>


<div>
  <p><span class="one">I'm</span> <span class="two">on the</span> <span class="three" style="line-height:1px"><span>yellow</span></span> <span>background</span> <span class="block"></span></p>
</div>