行高不是装饰，是阅读的呼吸节奏

在网页排版里，有一种你每天都会用到却少有人真正说清的东西——line-height。它不靠炫技，却能让文字在浏览器里“呼吸”得更自然，从标题到段落、从按钮到表格，合适的行高能直接改善可读性与视觉舒适度。

为什么需要设置行高

想象你在手机上看文章，字太挤会头晕，字太散又像在找东西。网页也一样。line-height决定了每行文字的垂直空间，是版面里“呼吸”的参数。在移动端与大屏端，字体大小与行高的比例直接影响阅读负担与停留时长。

基础概念与单位选择

line-height可以直接写数值、百分比，或者更直观的单位如rem、ex、vh。常见做法是用rem或百分比，原因是你能更稳定地与字体大小对齐，避免浏览器默认单位的差异带来的偏移。

• 数值：1 表示等于字体大小，2 表示两倍字体大小。
• 百分比：基于当前字体大小的百分比，如150%表示1.5倍字体大小。
• 单位：使用rem能更方便地做响应式维护。

设置行高的核心方法

全局统一

如果你要对一个页面的大部分文字统一调整，可以放在全局CSS里，优先作用于body或一个通用的父容器：

body {
  line-height: 1.6;
}

这个值要根据字体大小和阅读场景微调，常见的阅读行高在1.45到1.65之间，视屏幕与字体大小而定。

单个元素

针对按钮、标题、表格等特定元素，可以单独设置，以保证信息层次清晰：

h1 {
  line-height: 1.2;
}
p {
  line-height: 1.7;
}

在按钮上，适当的行高能让文字更醒目，同时提升点击体验。

复杂布局中的行高

在复杂的布局中，行高会受到父容器、边距、边框和padding的影响。这时需要逐层检查：

• 父容器的高度：如果父容器高度固定，行高要与之匹配，避免文字被截断。
• 边距与padding：上下空间会影响整体高度，需要把行高与这些值综合考虑。
• 负边距：有时候为了精确定位，会用负边距微调，此时也要相应调整行高。

实战技巧与注意事项

• 对比与测试：在不同设备与浏览器上对比阅读体验，是判断行高是否合适最直接的方法。
• 渐变过渡：在需要强调或弱化的地方，通过行高的渐变让层次自然过渡。
• 可读性优先：避免只追求视觉美观而牺牲可读性，尤其在小字号上更应严格把控。
• 响应式行高：在移动端优先考虑更小的行高，以减少视觉拥挤。

结语

line-height的设置，不是为了炫技，而是为了让文字读起来更轻松。在排版的细节上多花点心思，不仅能让页面更美观，也会提升用户的整体体验。理解并运用好行高，就能在网页里搭建出更舒适的阅读节奏。