line-height 控制行框高度，影响段落内行距，默认值紧凑，推荐正文使用 1.5–1.8，移动端 1.4–1.6；应配合 margin 控制段间距，避免混淆功能。
在网页排版中，line-height 不仅影响文字行距，还能显著优化段落之间的视觉间距。合理使用 line-height 可以让文本更易读、整体布局更舒适。
理解 line-height 的作用
line-height 控制的是行框高度，即每行文字基线之间的距离。它不仅用于单行内的垂直空间，还间接影响段落中多行文字的整体密度。
当设置段落（如 p 标签）的 line-height 时，实际上是为段落内每一行增加了上下留白，使文字不会挤在一起。
- 默认 line-height 通常为 1.0 到 1.2，显得紧凑
- 推荐设置为 1.5 到 1.8，适合正文阅读
- 移动端可略小（1.4–1.6），避免过度拉伸
用相对单位设置更灵活的间距
使用无单位数值（如 1.6）或 em 单位可以让 line-height 随字体大小自动调整，提升响应式表现。
立即学习“前端免费学习笔记（深入）”；
p {font-size: 16px;
line-height: 1.6; /* 计算为 16 × 1.6 = 25.6px 行高 */
}
这种方式比固定像素值（如 24px）更具适应性，尤其在不同设备或用户缩放时保持良好可读性。
结合 margin 控制段落间间距
line-height 解决的是段内行距，而段与段之间的空白应通过 margin 来控制。
只依赖 line-height 可能导致段落之间看起来太紧凑或不均匀。
p {margin-bottom: 1em;
line-height: 1.6;
}
使用 em 作为 margin 单位，能与字体大小联动，实现一致的垂直节奏。
避免常见错误
一些开发者试图用过大的 line-height 模拟段落间距，这会导致多行段落内部过于松散。
- 不要用 line-height 替代 margin 实现段间距
- 避免设置小于 1 的值，容易造成文字重叠
- 注意继承问题：子元素会继承 line-height 数值，可能影响按钮、标题等
基本上就这些。line-height 是优化段落可读性的关键工具，搭配合理的 margin 设置，能让文本内容更清晰、美观。掌握好两者分工，排版自然更专业。
