CSS行间距调整技巧分享

本文深入讲解了CSS中通过line-height属性精准控制文本行间距的实用技巧，重点推荐使用无单位数值（如1.5、1.6）这一最佳实践——它不仅确保子元素基于自身字体大小智能继承并计算行高，避免文字重叠和排版失衡，还大幅提升响应式设计中的可读性与一致性；同时对比分析了px、em、百分比及normal等取值方式的适用场景与潜在风险，并补充了垂直居中单行文本等进阶用法，帮助开发者用简单却关键的CSS细节显著优化网页文本体验。

在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倍 */
}
<p>h1 {
line-height: 30px;   /<em> 固定行高 </em>/
}</p><p>.text {
line-height: 150%;   /<em> 百分比形式 </em>/
}</p>

line-height 的继承机制

当 line-height 使用数值时，子元素会基于自身的字体大小重新计算行高，这是推荐做法。如果使用固定单位如 px，子元素将继承该具体值，可能导致排版不协调。

例如：

body {
  font-size: 16px;
  line-height: 1.5; /* 子元素会按自身字体大小 × 1.5 计算 */
}

注意事项

• 避免使用过小的 line-height，会导致文字重叠，影响可读性。
• 在移动端或响应式设计中，建议使用无单位数值，适应不同屏幕字体大小。
• line-height 也可以用于垂直居中单行文本，将其设为与容器高度相同即可。

基本上就这些，合理使用 line-height 能显著提升文本的阅读体验。不复杂但容易忽略细节。

今天关于《CSS行间距调整技巧分享》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！