通过line-height属性调整文本行间距，推荐使用无单位数值以提升可读性与响应式适配，合理设置可优化排版美观与阅读体验。
在HTML和CSS中，调整文本行间距（也称为“行高”）主要通过 line-height 属性来实现。这个属性控制的是文本行与行之间的垂直间距，合理设置可以让内容更易读、排版更美观。
1. 使用CSS的line-height属性
line-height 是最直接控制行间距的方式，可以在内联样式、内部样式表或外部CSS文件中使用。
常用值类型包括：- 数字（无单位）：如 1.5，表示行高为字体大小的1.5倍，推荐使用，具有良好的继承性
- 像素（px）：如 20px，固定行高，适合精确控制
- 百分比（%）：如 150%，基于当前字体大小计算
- em单位：如 1.5em，相对当前字体大小
示例：
p {
line-height: 1.6; /* 推荐做法 */
}
h1 {
line-height: 1.2;
}
.small-text {
line-height: 18px;
}
2. 在HTML标签中直接设置（不推荐但可用）
可以通过内联 style 属性快速设置某一段落或元素的行高。
立即学习“前端免费学习笔记（深入）”；
<p style="line-height: 2;">这是一段有较大行距的文字。</p> <div style="line-height: 1.4;">自定义行高的区块</div>
虽然方便，但建议将样式写在CSS中以保持结构与表现分离。
3. 行高设置的最佳实践
合理设置行高能显著提升阅读体验，尤其在大段文字中。
- 正文文本推荐使用 1.5 到 1.8 的无单位值
- 标题可使用较小值，如 1.1 到 1.3，避免显得松散
- 移动端注意适配，适当增加行高提升可读性
- 避免使用过小的行高（如小于1），会导致文字重叠
4. 注意继承与子元素的影响
当父元素设置 line-height 为数字时，子元素会基于自己的字体大小重新计算行高；若设为固定值（如px），则不会按比例缩放。
例如：
body {
font-size: 16px;
line-height: 1.5; /* 子元素按自身字号乘以1.5 */
}
这样更灵活，适合响应式设计。
基本上就这些。掌握 line-height 的用法，能让你的网页文本看起来更专业、舒适。关键是根据内容类型选择合适的值，并优先使用无单位数值来保证可维护性和响应性。不复杂但容易忽略细节。
