lh是绑定当前元素计算后line-height像素值的css单位，依赖明确line-height（非normal）且仅在现代浏览器支持；它使间距严格对齐文本行节奏，如margin-bottom:1lh比1.6em更精准。

lh 单位不是“行高值的别名”，而是实时绑定当前元素 line-height 计算结果的长度单位 —— 它只在支持 CSS Values and Units Level 4 的浏览器中可用（Chrome 89+、Firefox 87+、Safari 15.4+），旧版 Safari 和 IE 完全不识别。

为什么 lh 值有时是 0 或没效果

常见错误是误以为 lh 能在任意上下文生效。它依赖两个前提：当前元素必须有明确计算出的 line-height，且该值不能是 normal。

• line-height: normal 不产生确定数值，1lh 在多数浏览器中会退化为 0 或被忽略
• 行内元素（如 <span></span>）默认无 line-height 计算上下文，lh 不生效
• 父元素设置了 line-height，但子元素显式重写了 font-size 且未同步设置 line-height，此时子元素的 lh 基于自身行高（可能为 normal）
• CSS 自定义属性中直接写 1lh 不会被解析，需用 calc(var(--x) * 1lh) 等间接方式

lh 和 rem/em 的关键区别在哪

三者都属相对单位，但绑定对象完全不同：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• em 绑定当前元素的 font-size；rem 绑定根元素的 font-size
• lh 绑定当前元素**实际计算出的 line-height 像素值**（不是倍数，是最终像素）
• 当 line-height 用无单位数字（如 1.5）时，lh 会随 font-size 动态变化；但若用 px（如 line-height: 24px），1lh 就恒为 24px，与字体大小无关
• lh 不继承“倍数”，继承的是计算后的绝对值 —— 这点和百分比、em 一致，但和无单位数字不同

哪些场景下 lh 真正不可替代

它解决的是「间距要严格对齐文本行节奏」的问题，不是为了炫技。

• 段落间留白始终等于一行高度：p { margin-bottom: 1lh; }，比写 margin-bottom: 1.6em 更精准（因 em 绑定字体而非行高）
• 按钮内边距随行高缩放：button { padding: 0.5lh 1lh; line-height: 1.3; }，文字变大时按钮自动撑开，不会出现文字贴边
• 引用块左侧装饰线粗细与行高成比例：blockquote { border-left: 0.25lh solid #ccc; }，避免小字号下线条过粗、大字号下过细
• 行内图标垂直对齐文本基线：.icon { height: 1lh; vertical-align: middle; }，前提是父容器有明确 line-height

真正容易被忽略的是：当你在组件库或设计系统中使用 lh 时，必须确保所有消费方都已声明 line-height —— 它不像 rem 那样有个默认锚点（根字体），lh 的锚点就是当前元素自己，没声明就等于没锚。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！