如何通过css line-height控制行高

行高（line-height）通过控制文本行间距提升可读性与视觉效果，支持无单位数值、带单位长度、百分比和normal等取值；推荐使用无单位数值（如1.5），能基于字体大小按比例计算并良好继承；每行文本形成“行框”，line-height决定其高度，超出font-size的部分均分于文字上下，实现宽松布局；正文建议设为1.5，标题可设1.2~1.3，单行文本垂直居中可通过line-height等于容器高度实现，避免过小行高导致拥挤。

行高（line-height）是控制文本行与行之间垂直间距的关键CSS属性。合理设置 line-height 能显著提升文字的可读性和页面整体视觉效果。

line-height 的基本用法

line-height 可以接受多种类型的值：

• 无单位数值：如 line-height: 1.5;，表示行高为字体大小的1.5倍，推荐使用这种方式，具有良好的继承性。
• 带单位的长度值：如 line-height: 20px; 或 line-height: 1.5em;，适用于需要精确控制的场景。
• 百分比：如 line-height: 150%;，基于当前字体大小计算，但继承时可能产生意料之外的结果，需谨慎使用。
• normal：使用浏览器默认行高，通常在1到1.2之间，具体取决于元素和字体。

line-height 如何影响布局

行高的作用不只是拉开文字距离。每一行文本都会围绕文字内容生成一个“行框”（line box），line-height 决定了这个框的高度。如果 line-height 大于 font-size，多余空间会平均分配在文字上下两侧。

例如：

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

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

此时每行总高24px，文字上下各留有 (24 - 16) / 2 = 4px 的空白，使段落看起来更宽松舒适。

实际应用建议

为了获得最佳阅读体验，可以参考以下建议：

• 正文文本推荐设置 line-height: 1.5，适合大多数字体和屏幕显示。
• 标题类文字可适当缩小，如 line-height: 1.2 ~ 1.3，避免显得过于松散。
• 多行内联元素或按钮中文本居中时，可通过设置 line-height 等于容器高度实现垂直居中（单行文本适用）。
• 避免使用过小的行高，会导致文字拥挤、难以阅读。

基本上就这些。掌握 line-height 的灵活使用，能让文本排版更专业自然。关键是理解它如何与 font-size 配合，并根据内容类型调整合适比例。不复杂但容易忽略细节。

以上就是如何通过css line-height控制行高的详细内容，更多请关注php中文网其它相关文章！