HTML/CSS：具有垂直对齐和行高的垂直对齐跨度

Question

很抱歉打败了一匹死马，但我一生都无法理解为什么下面的方法不起作用。

• 放 line-height: 50px
• 放 vertical-align: top
• 我的理解，这应该使线箱50像素高的，然后vertical-align应该根据MDN，能够左右移动内联元素里面。

具体来说：

以下值相对于整行垂直对齐元素：

底部

将元素及其后代的底部与整行的底部对齐。

我试过这两个：

<span style="line-height: 50px; border: 1px solid red; vertical-align: bottom">Some text</span>

和这个：

<div style="line-height: 50px; border: 1px solid yellow">
   <span style="border: 1px solid red; vertical-align: bottom">Some text</span>
</div>

这是我希望将跨度定位在底部的最后一个版本。它说 line-box 应该是 50px，然后vertical-align用于 child span。

PS：请不要只说“使用 flexbox”或类似的。我想了解内部工作原理/从概念上讲为什么上面没有将跨度定位在行的底部。

Answer 1

你说的一切都是对的，但你只是忘记了继承的东西。span 元素在 div 上定义了相同的行高，这就是为什么bottom对您的情况没有影响的原因。

将值重置为initial，它将起作用。

<div style="line-height: 50px; border: 1px solid yellow">
<span style="border: 1px solid red; vertical-align: bottom;line-height:initial;">Some text</span>
</div>