如何用css line-height实现段落间距优化

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 随字体大小自动调整，提升响应式表现。

立即学习“前端免费学习笔记（深入）”；

这种方式比固定像素值（如 24px）更具适应性，尤其在不同设备或用户缩放时保持良好可读性。

美间AI

美间AI：让设计更简单

45

查看详情

结合 margin 控制段落间间距

line-height 解决的是段内行距，而段与段之间的空白应通过 margin 来控制。

只依赖 line-height 可能导致段落之间看起来太紧凑或不均匀。

使用 em 作为 margin 单位，能与字体大小联动，实现一致的垂直节奏。

避免常见错误

一些开发者试图用过大的 line-height 模拟段落间距，这会导致多行段落内部过于松散。

• 不要用 line-height 替代 margin 实现段间距
• 避免设置小于 1 的值，容易造成文字重叠
• 注意继承问题：子元素会继承 line-height 数值，可能影响按钮、标题等

基本上就这些。line-height 是优化段落可读性的关键工具，搭配合理的 margin 设置，能让文本内容更清晰、美观。掌握好两者分工，排版自然更专业。

以上就是如何用css line-height实现段落间距优化的详细内容，更多请关注php中文网其它相关文章！