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>）默认无line-height计算上下文，lh不生效 - 父元素设置了
line-height，但子元素显式重写了font-size且未同步设置line-height，此时子元素的lh基于自身行高（可能为normal） - CSS 自定义属性中直接写
1lh不会被解析，需用calc(var(--x) * 1lh)等间接方式
lh 和 rem/em 的关键区别在哪
三者都属相对单位，但绑定对象完全不同：
-
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 的锚点就是当前元素自己，没声明就等于没锚。
