通过line-height属性设置CSS行间距,可取值为数值、长度单位、百分比或normal;推荐使用无单位数值以确保良好继承性,避免文字重叠并提升响应式设计中的可读性。

在CSS中设置行间距主要通过 line-height 属性来实现,它控制文本行与行之间的垂直间距。这个属性适用于大多数包含文本的元素,比如 p、div、span、h1-h6 等。
使用 line-height 设置行间距
line-height 可以接受多种类型的值:
- 数值(如 1.5):最推荐的方式,表示当前字体大小的倍数,具有良好的继承性。
- 长度单位(如 20px、1.5em):指定具体的间距大小,px 是固定值,em 相对于当前字体大小。
- 百分比(如 150%):相对于当前元素字体大小计算。
- normal:默认值,由浏览器决定,通常约为字体大小的 1.0 到 1.2 倍。
示例:
p {
line-height: 1.6; /* 推荐:字体大小的1.6倍 */
}
h1 {
line-height: 30px; / 固定行高 /
}
.text {
line-height: 150%; / 百分比形式 /
}
line-height 的继承机制
当 line-height 使用数值时,子元素会基于自身的字体大小重新计算行高,这是推荐做法。如果使用固定单位如 px,子元素将继承该具体值,可能导致排版不协调。
立即学习“前端免费学习笔记(深入)”;
例如:
body {
font-size: 16px;
line-height: 1.5; /* 子元素会按自身字体大小 × 1.5 计算 */
}
注意事项
- 避免使用过小的 line-height,会导致文字重叠,影响可读性。
- 在移动端或响应式设计中,建议使用无单位数值,适应不同屏幕字体大小。
- line-height 也可以用于垂直居中单行文本,将其设为与容器高度相同即可。
基本上就这些,合理使用 line-height 能显著提升文本的阅读体验。不复杂但容易忽略细节。










