CSS行高设置技巧大全

行高（line-height）是CSS中提升文本可读性与视觉舒适度的关键属性，它通过科学控制行间距影响整体排版效果——推荐优先使用无单位数值（如1.5），既能按字体大小自动缩放又具备优秀继承性；理解“行框”概念有助于掌握多余空间如何均分于文字上下，从而实现宽松自然的段落布局；正文宜设为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，多余空间会平均分配在文字上下两侧。

例如：

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

实际应用建议

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

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

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。