HTML/CSS：设置line-height:50px与vertical-align:top为何无法对齐span

嗨，我太懂这种明明按理论设置却没效果的挫败感了！咱们一点点把这个问题捋清楚～

首先，你提到的行框（line-box）高度，其实不完全是由line-height直接决定的——行框的高度是由该行内所有元素的最高顶部和最低底部共同撑起来的。当你给父块级元素设置line-height:50px时，它是给内部的行内元素设定了默认的行高，但如果行内元素本身的尺寸（比如文字的内容区高度、替换元素的高度）加上它的上下间距（由line-height和自身高度的差值分配），才会最终形成行框的高度。

接下来聊聊vertical-align:top的实际作用：它是把目标元素的顶部边界，和当前行框的顶部边界对齐。但为什么你感觉没效果？大概率是这两种情况：

• 你的行内元素自身高度等于line-height：比如你给一个文字元素设置了font-size:50px同时继承了line-height:50px，这时候元素的内容区高度几乎等于行框高度，vertical-align:top自然看不出位置变化——因为它本来就贴在顶部了。
• 你把line-height设置在了行内元素本身而非父容器：如果行内元素自己的line-height和内容高度一致，行框高度就等于元素高度，vertical-align也就没有调整空间了。

举个直观的代码例子对比一下：

<!-- 情况1：文字元素高度 < line-height，vertical-align:top生效 -->
<div style="line-height:50px; border:1px solid #ddd; margin-bottom:10px;">
  <span style="background:#ffeb3b;">默认基线对齐</span>
</div>
<div style="line-height:50px; border:1px solid #ddd;">
  <span style="vertical-align:top; background:#ffeb3b;">top对齐（贴在行框顶部）</span>
</div>

你会发现第二个span的黄色背景块是紧贴容器顶部的，而第一个会有上下的间距——这就是vertical-align:top的作用体现。

再比如替换元素（比如图片）的情况：

<div style="line-height:50px; border:1px solid #ddd; margin-bottom:10px;">
  <img src="https://picsum.photos/30/30" alt="测试图"> 默认基线对齐（底部有间距）
</div>
<div style="line-height:50px; border:1px solid #ddd;">
  <img src="https://picsum.photos/30/30" alt="测试图" style="vertical-align:top;"> top对齐（贴在行框顶部）
</div>

这里的差异会更明显，默认基线对齐的图片底部会有空隙，而top对齐的图片会直接贴在容器顶部。

总结一下，你觉得设置无效的核心原因，大概率是行内元素的高度和行框高度没有差值，导致vertical-align:top没有可调整的空间。你可以检查一下元素的实际高度、是否继承了正确的line-height，或者换个尺寸更小的元素试试，就能看到效果啦～

内容的提问来源于stack exchange，提问作者Magnus