line-height 设无单位数字(如1.5)最稳妥,因其相对当前font-size自动缩放,避免继承塌陷或溢出;影响行框高度而非字体大小,需配合font-size调整以保持视觉节奏。
line-height 值设为无单位数字最稳妥
直接写 line-height: 1.5 比 line-height: 1.5em 或 line-height: 24px 更可靠。无单位数字是相对于当前元素字体大小的倍数,会随 font-size 自动缩放,避免子元素继承后行高塌陷或溢出。
常见错误是用像素值固定行高,一旦父级字号变大(比如响应式中 font-size 增至 20px),line-height: 24px 就显得过紧;而 line-height: 1.5 会自动变成 30px,保持视觉节奏一致。
- 正文段落推荐
line-height: 1.5~line-height: 1.6 - 标题可略紧凑,如
line-height: 1.2~line-height: 1.3 - 小号文字(如
font-size: 12px)慎用line-height: 1,易造成字粘连
line-height 影响行框高度,但不改变字体本身
line-height 控制的是「行框(line box)」的最小高度,不是文字实际占据的空间。它通过在文字上下添加「半行距(half-leading)」来实现——这部分空白不可见、不可点击、也不影响 padding 或 margin 的计算。
这意味着:
立即学习“前端免费学习笔记(深入)”;