line-height 实质控制行框盒子高度，影响文字及inline元素垂直排布；无单位值（如1.5）相对font-size缩放，比固定像素值（如24px）更适配响应式与混排场景。
line-height 设置行间距的实质作用
line-height 控制的是「行框盒子」（line box）的高度，不是两行文字基线之间的距离，也不是上下外边距。它影响的是整行内容在垂直方向上的排布空间——包括文字、inline 元素、甚至 vertical-align 的对齐基准。设为 1.5 或 24px 看似简单，但实际渲染取决于父元素字体大小、子元素是否继承、是否被 font-size 缩放干扰。
为什么 line-height: 1.5 比 line-height: 24px 更安全
-
1.5 是无单位数值，表示相对于当前元素 font-size 的倍数，会随字号缩放，适合响应式或嵌套文本（比如 em 或 rem 字体）
-
24px 是固定值，如果父元素 font-size 是 16px，子元素是 20px，那这行间距就可能显得太挤或太松，且无法继承缩放
- 当段落内混用不同字号（如
small 标签或 span 设置了 font-size），无单位值能保持视觉节奏一致；固定像素值容易导致小字行距过大、大字行距过小
常见错误：用 margin 或 padding 代替 line-height
1.5 是无单位数值，表示相对于当前元素 font-size 的倍数，会随字号缩放，适合响应式或嵌套文本（比如 em 或 rem 字体）24px 是固定值，如果父元素 font-size 是 16px，子元素是 20px，那这行间距就可能显得太挤或太松，且无法继承缩放small 标签或 span 设置了 font-size），无单位值能保持视觉节奏一致；固定像素值容易导致小字行距过大、大字行距过小margin 或 padding 代替 line-height
有人给 p 加 margin-bottom 模拟“行距”，这是错的——那只是段落之间的空白，不是段落内部每一行的间距。真实问题常出现在：
- 多行
p内含换行符或br，但视觉上行与行之间太密 - 使用了
display: inline-block或vertical-align: top的内联元素后，行高塌陷或错位 - 设置了
font-size: 0清除间隙，却忘了重置子元素的line-height，导致文字挤成一团
兼容性与边界情况提醒
line-height 在所有现代浏览器中行为一致，但注意两个细节：
- IE8 及更早版本不支持无单位值在某些表单控件中正确继承，若需兼容，可对
input、button单独设置line-height: normal或像素值 - 当
line-height小于字体实际高度（比如font-size: 16px配line-height: 12px），文字可能被截断或重叠，尤其在 Firefox 中更明显 - Flex 容器里的文本若设了
align-items: center，line-height仍生效，但垂直居中逻辑会和 flex 对齐叠加，容易误判效果来源
p 标签本身——行高是继承属性，真正起效的是每个行内盒的计算值，而那个值往往藏在最深的文本节点里。 
