CSS如何理解行盒的垂直高度计算_依赖于line-height而非常规的height属性-css教程-PHP中文网

行盒垂直高度由line-height与字体度量共同决定，而非height；line-height设数字时相对自身font-size计算，设像素值则固定；vertical-align影响行盒高度是因改变元素在行盒内的对齐位置，从而触发重算最大覆盖范围。

css如何理解行盒的垂直高度计算_依赖于line-height而非常规的height属性

line-height 怎么决定行盒的垂直高度

行盒（inline box）的垂直高度不是由 height 控制的，而是由 line-height 和字体度量共同算出来的。浏览器先确定“行高基线”位置，再上下分配半行距，形成整行的可用高度。这个高度会撑开包含它的块级容器（比如 <p></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，浏览器就得重新计算这行的“最高点”和“最低点”，从而可能拉高整个行盒——哪怕其他元素没动。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

典型错误：在一行里混用图片和文字，图片默认 vertical-align: baseline，但图片底部会留出 descender 空间；如果改成 vertical-align: middle，浏览器要找行盒中线，结果可能把行高撑得比预期高很多。

vertical-align 的 top/bottom 是相对于**整行行盒的上下边缘**对齐，所以会强制行盒至少高到能容下对齐目标
vertical-align: text-top 对齐到父级字体的 ascent，比 top 更紧凑；text-bottom 类似，但对齐到 descender 底部
当多个 inline 元素 vertical-align 值不一致时，行盒高度取所有元素“所需最大覆盖范围”的并集，不是简单叠加