行盒垂直高度由line-height与字体度量共同决定，而非height；line-height设数字时相对自身font-size计算，设像素值则固定；vertical-align影响行盒高度是因改变元素在行盒内的对齐位置，从而触发重算最大覆盖范围。
line-height 怎么决定行盒的垂直高度
行盒（inline box）的垂直高度不是由 height 控制的，而是由 line-height 和字体度量共同算出来的。浏览器先确定“行高基线”位置，再上下分配半行距，形成整行的可用高度。这个高度会撑开包含它的块级容器（比如 <p>），哪怕里面只有纯文本。
常见错误现象：span 设了 height: 20px 但完全没用；或者给 a 加 line-height: 1.5 后发现文字上下留白变大，但点击区域没跟着变——因为点击区域还是由行盒实际高度决定的，不是你写的 height。
-
line-height值为数字（如1.5）时，是相对于当前元素字体大小计算的，继承时也按子元素自己的font-size重算 - 值为带单位长度（如
24px）时，是固定值，不随字号缩放，容易在响应式中出问题 - 值为
normal时，浏览器按字体内置的metrics（如 ascent/descent）加经验性留白估算，不同字体结果可能差几像素
为什么设置 height 对 inline 元素无效
因为 height 属性对非替换的 inline 元素（如 span、a、strong）是**被忽略的**。CSS 规范明确写了：这类元素的 height 和 width 不生效。你看到的“高度”，其实是它所在行盒的高度，而那个高度来自父级的 line-height 或字体本身。
使用场景：想让一个 span 在行内“显得更高”，不能靠 height，得改它或它父级的 line-height，或者用 vertical-align 调整对齐基线位置来间接影响视觉占用。
立即学习“前端免费学习笔记（深入）”；
- 把
span改成display: inline-block后，height才开始起作用，但它已不是行内框了，会引入新布局行为（如换行、margin 影响） - 用
padding可以伪造高度感，但 padding 会增加行盒总高（因为它在行内框内部，但行盒必须容纳它），可能撑开整行 - 字体本身的
line-gap、ascender、descender会影响最终行盒高度，尤其在用自定义字体或 icon font 时，差异更明显
vertical-align 怎么和 line-height 协同影响行盒高度
vertical-align 不改变行盒高度本身，但它决定了**该行内元素内容如何在行盒里摆放**。一旦某个元素设了 vertical-align: top 或 bottom，浏览器就得重新计算这行的“最高点”和“最低点”，从而可能拉高整个行盒——哪怕其他元素没动。
典型错误：在一行里混用图片和文字，图片默认 vertical-align: baseline，但图片底部会留出 descender 空间；如果改成 vertical-align: middle，浏览器要找行盒中线，结果可能把行高撑得比预期高很多。
-
vertical-align的top/bottom是相对于**整行行盒的上下边缘**对齐，所以会强制行盒至少高到能容下对齐目标 -
vertical-align: text-top对齐到父级字体的ascent，比top更紧凑；text-bottom类似，但对齐到descender底部 - 当多个
inline元素vertical-align值不一致时，行盒高度取所有元素“所需最大覆盖范围”的并集，不是简单叠加
调试行盒高度的实际方法
别猜，直接看 DevTools 的 Layout 面板。Chrome/Firefox 都能在 :hover 时显示行盒（叫 “Line box” 或 “Inline box”），勾选“Show layout bounds”就能看到每个行盒的真实高度和基线位置。
常见误判：以为 line-height: 1.5 就等于 font-size * 1.5，其实还要加上字体自身的上下留白（尤其是中文字体常有额外 line-gap）。用 getComputedStyle(el).lineHeight 查到的是计算后值，但未必等于你写的数值。
- 临时加
outline: 1px solid red到span上，能看到它实际占据的行内空间（注意 outline 不影响布局） - 用
font-family: monospace测试更稳定，等宽字体的度量更统一，适合排查 baseline 偏移 - 遇到奇怪的空白，优先检查父级
line-height是否为normal，再查子元素有没有vertical-align或图片/伪元素干扰
行盒高度从来不是单个属性能定死的，它是字体、line-height、vertical-align、甚至 Unicode 字符类别（比如 emoji 会触发特殊 baseline 处理）一起算出来的。调的时候，得同时盯住这四样东西。
