在编写CSS样式时，line-height是用来控制文本行间距的重要属性。很多人在写样式时会混用line-height:150%和line-height:1.5，认为它们只是写法不同、效果完全一样。实际上，这两种写法在计算方式和继承行为上存在本质区别，尤其是在嵌套结构和不同字体大小的元素中，会表现出完全不同的渲染结果。
一、基本计算方式的差异
当给一个元素设置line-height:150%时，浏览器会先根据该元素自身的font-size计算出一个具体的行高像素值，然后再应用这个已经计算好的固定值。例如某元素字体大小为16px，那么150%会被立即计算为24px，这个24px就是该元素最终使用的行高。
而line-height:1.5则是一个无单位的缩放因子。浏览器不会立即算出具体像素，而是把这个1.5的比例关系记住。该元素自身的行高同样是16px乘以1.5等于24px，看起来和150%一样，但关键在于这个值并没有被“固化”，而是以比例形式存在，后续会影响其子元素的行高计算。
二、继承机制带来的不同表现
百分比形式的line-height在继承时，传递的是已经计算出来的具体长度值。也就是说，父元素算出的24px会直接作为子元素的行高，不管子元素的font-size是多少。如果子元素字号变大为32px，它的行高依旧是24px，这会导致文字重叠或拥挤。
无单位数值1.5在继承时，传递的是比例本身。子元素会拿自己的font-size乘以1.5来得到自己的行高。比如子元素字号32px，行高就自动变为48px，始终维持合理的阅读比例。这种差异在多层嵌套的组件中格外明显。
<div style="font-size:16px; line-height:150%;"> 父元素行高24px <p style="font-size:32px;">子元素行高仍为24px，文字可能重叠</p> </div> <div style="font-size:16px; line-height:1.5;"> 父元素行高24px <p style="font-size:32px;">子元素行高自动为48px，排版舒适</p> </div>
三、实际使用中的选择建议
在开发通用组件、文章正文或任何包含字号变化的结构时，推荐使用无单位的line-height数值（如1.5）。这样能确保无论嵌套多深、字号如何调整，文本都保持协调的行距，减少样式覆盖和调试成本。
如果你明确希望某一块内容的行高固定不变，不随内部字号缩放，比如某些表格单元格或按钮内的文字，可以使用百分比或具体像素值。但需清楚知道它不会随子元素字号自适应，避免后期出现布局异常。下表总结了两者核心区别：
| 写法 | 计算时机 | 继承内容 | 子元素字号变化时 |
|---|---|---|---|
| line-height:150% | 当前元素编译时算具体值 | 固定像素值 | 行高不变，可能拥挤 |
| line-height:1.5 | 使用时按自身字号算 | 比例因子 | 行高随字号等比缩放 |
四、常见误区与调试方法
不少开发者在全局样式里写body{line-height:150%}，之后发现标题或引用块的字号变大后行距不对，却找不到原因。其实这就是百分比继承固化导致的。把全局改成body{line-height:1.5}往往能解决大部分排版问题。
调试时，可以利用浏览器开发者工具查看元素的最终line-height值。若发现某元素行高明显小于字号乘以预期比例，多半是继承了父级的百分比定值。此时应检查上层样式，将百分比统一改为无单位值，或通过重新声明line-height来覆盖。
/* 不推荐：全局百分比导致嵌套字号变大时行高异常 */
body {
font-size: 14px;
line-height: 150%;
}
/* 推荐：无单位值，子元素自动适配 */
body {
font-size: 14px;
line-height: 1.5;
}
/* 局部需要固定行高时可显式使用像素 */
.caption {
font-size: 12px;
line-height: 18px;
}
理解line-height两种写法的底层差异，是写出健壮CSS的基础。在团队协作和组件复用场景中，统一使用无单位数值能显著降低样式冲突风险，让排版更可控。
cssline-height继承机制修改时间：2026-08-07 15:30:28