HTML/CSS : Vertical aligning span with vertical-align and line-height

Question

抱歉打死马，但我无法理解为什么下面的方法不起作用。

• 设置line-height: 50px
• 设置vertical-align: top
• 据我了解，这应该使行框高 50 像素，然后 vertical-align 应该，according to MDN , 能够在其中移动内联元素。

具体来说:

The following values vertically align the element relative to the entire line:

bottom

Aligns the bottom of the element and its descendants with the bottom of the entire line.

这两个我都试过了:

<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 在子 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>