CSS行高设置技巧与实战应用

做网页设计时，文字的可读性往往决定了用户的停留时间。你有没有遇到过一段文字挤在一起，看起来特别累？或者行与行之间空得太多，显得松散不紧凑？这时候，CSS 的 line-height 属性就派上用场了。

什么是 line-height

line-height 就是“行高”，它控制的是文本行与行之间的垂直距离。这个值不是简单的上下间距，而是包括文字本身高度和上下留白的总和。浏览器默认的行高通常是字体大小的 1.2 倍左右，但很多时候并不够用。

你可以用多种方式来设置 line-height，最常见的是用无单位数值、像素值或百分比。

比如你想让段落文字更舒展一些：

p {
  font-size: 16px;
  line-height: 1.5;
}

这里的 1.5 是无单位的，表示行高是字体大小的 1.5 倍，也就是 16 × 1.5 = 24px。这种方式的好处是继承时会重新计算，子元素不会直接继承 24px，而是基于自己的字体大小再乘以 1.5。

如果你想要更精确地控制，也可以直接写像素值：

.title {
  font-size: 20px;
  line-height: 28px;
}

这样每一行的高度就是固定的 28px，适合标题这类不需要灵活缩放的场景。

用百分比设置行高时，它是基于当前元素的 font-size 计算的。比如：

.text {
  font-size: 18px;
  line-height: 150%;
}

结果就是 18 × 1.5 = 27px。看起来和无单位的 1.5 差不多，但在继承处理上略有不同，容易造成意外的布局问题，一般推荐优先使用无单位数值。

想象你在做一个博客页面，正文用 16px 字体，但发现段落读起来有点压抑。加个 line-height: 1.6 后，立马清爽不少。

.article p {
  font-size: 16px;
  line-height: 1.6;
}

再比如按钮里的文字，有时候上下贴边不好看，调一下行高就能居中显示：

.btn {
  height: 40px;
  line-height: 40px; /* 让文字垂直居中 */
  text-align: center;
}

当然，这只适用于单行文本。多行就得用别的方法了。

有时候你会发现标题嵌套在段落里突然变得特别高，可能是父元素和子元素都设置了行高，导致叠加。解决办法是给特定元素明确设置，或者用无单位值来避免继承混乱。

还有一个实用建议：在全局样式里统一设置 body 的行高，比如：

body {
  font-size: 14px;
  line-height: 1.5;
}

这样整个页面的文字基础节奏就一致了，后续再微调也不容易出错。