行距的固定是页面排版里最基础也最容易踩坑的问题之一。很多前端开发者以为随便写个line-height: 1.5就能控制住所有情况，结果换个字体、调个字号，或者遇到内部嵌套的<span>，行与行之间的距离又开始飘忽。根本原因在于CSS中行距的计算并不是一个孤立的数值，它和字体度量、继承规则以及行盒的构造方式都有关系。只有把line-height的取值语义彻底搞清楚，才能让行距真正稳定下来。
本文不打算罗列所有CSS属性，而是从实际遇到的排版异常出发，一步步拆解行距固定的正确姿势。会先生成一段常见的多行文本，然后展示不同line-height写法下渲染效果的差异，再给出在复杂DOM结构中保持行距一致的具体方案。最后还会解释为什么有时候设置了固定的像素值却依然出现行高跳动，以及如何用vertical-align配合彻底消除这种不稳定。
line-height的四种取值为什么结果不一样
CSS规范给line-height定义了四种取值类型：normal、纯数字、长度单位值、百分比值。很多人以为它们只是写法不同，实际计算出的像素值应该一样，但真正渲染时差异非常明显。normal是一个关键字，浏览器会根据字体自身的度量信息自动计算一个合适的行高，通常在1.2到1.4之间，但具体值因字体而异。这就导致同一个元素在Arial和SimSun下的行距可能完全不同，根本无法固定。
纯数字是最值得推荐的写法，比如line-height: 1.6。这个数字会作为一个缩放因子与元素自身的font-size相乘，得到最终使用的行高。如果父元素字号是16px，那么行高就是25.6px，子元素如果继承了这个值，注意继承的是数字1.6而不是计算后的25.6px。子元素字号改为20px时，行高会自动变成32px，保持比例一致。这就是使用纯数字能够「固定」行距比例的原因。
长度单位值（例如line-height: 24px或line-height: 1.5em）会先根据当前元素的字号计算出一个绝对值，然后这个绝对值再被继承给子元素。假设父元素字号16px，设置line-height: 24px，子元素继承到的是24px这个死值。一旦子元素字号改成20px或12px，行高仍然是24px，如果子元素字号超过24px，文字就会发生重叠或者行距异常拥挤。百分比值的计算逻辑和长度单位值类似，line-height: 150%会先基于父元素字号算出绝对值（16px * 1.5 = 24px），然后子元素继承这个24px，同样无法随子元素字号变化。
下面用一段代码直观对比这四种写法：
.parent-normal {
font-size: 16px;
line-height: normal;
}
.parent-number {
font-size: 16px;
line-height: 1.6;
}
.parent-px {
font-size: 16px;
line-height: 24px;
}
.parent-percent {
font-size: 16px;
line-height: 150%;
}
.child {
font-size: 24px; /* 子元素故意放大字号 */
}
/* 只有父元素用纯数字时，子元素行高自动变成38.4px，其余保持24px */
从这段代码能看出，如果追求行距的「固定」是指比例固定，那么纯数字是最优解；如果追求绝对像素固定，那么使用长度单位值也可以，但要确保所有嵌套元素的字号不再变化。实际项目中推荐统一使用纯数字，并在全局样式表开头就定义好基础行高，避免不同模块各自为政。
块级容器与内联元素的行距处理差异
固定行距在块级元素里比较好处理，给容器设置line-height后，内部普通文本流都会遵循这个值。但一旦出现内联元素（<span>、<a>、<em>等），行距的计算就变得复杂。因为CSS行盒模型规定，一个行盒的高度由该行内所有内联元素的行高共同决定，最高的那个元素会撑开整行的高度。如果某个内联元素偷偷修改了自己的line-height或者font-size，整行行距就会被破坏。
来看一个常见场景：容器设置了line-height: 1.5，但内部一个<span>因为需要突出显示而设置了更大的字号font-size: 20px，却没有同步调整行高。这个<span>的行高会按照继承的数字1.5自动变为30px，而周围文字是24px，于是这一行的高度被撑到30px，上下留白明显变大，看起来行距突然变宽了。要固定行距，要么给这个特殊的内联元素显式设置相同的line-height，要么使用vertical-align控制其对齐方式防止撑高行盒。
很多开发者会误以为给内联元素设置高度height就能限制行高，这是完全错误的。height对非替换内联元素不生效，真正参与行高计算的是line-height。下面的代码演示了如何正确处理内联元素的行距固定问题：
.container {
font-size: 16px;
line-height: 1.5;
}
.highlight {
font-size: 20px;
line-height: 1.2; /* 故意设置更小的行高来抵消字号增大的影响 */
vertical-align: middle; /* 让高字号元素垂直居中，避免行盒被撑开 */
}
/* 如果只想保证行距统一，更简单的做法是给所有内联元素统一重置 */
.container span,
.container a,
.container em {
line-height: inherit;
}
另外，当容器内部包含图片、表单控件等替换元素时，这些元素自身的高度会直接影响行盒高度。固定行距时需要注意给替换元素设置合适的vertical-align，默认的baseline对齐会让图片下方多出几像素间隙，导致行距看起来不匀。一般设置成vertical-align: middle或top即可消除这种间隙。
多行文本与响应式布局中的行距固定策略
多行文本的行距控制看似简单，只要设置一个line-height就行，但实际遇到的情况往往更棘手。比如用户调整浏览器字号（通过浏览器设置放大字体），如果行距使用的是像素绝对值，比如line-height: 20px，当字体被迫放大到18px时，行高20px仍然不变，行与行之间几乎贴在一起。这就是为什么响应式设计中强烈建议使用相对单位或无单位数值来设置行距。
一个稳妥的策略是：在html或body级别设置基准字号和行高，然后后续模块全部使用rem和纯数字行高。例如：
html {
font-size: 16px;
}
body {
font-size: 1rem; /* 16px */
line-height: 1.6; /* 固定比例，不随绝对值变化 */
}
.article-content {
font-size: 1.125rem; /* 18px */
line-height: 1.65; /* 可以微调，但保持无单位数字 */
}
@media (max-width: 600px) {
html {
font-size: 14px; /* 小屏幕降低基准字号 */
}
.article-content {
line-height: 1.7; /* 移动端适当增加行距比例提升可读性 */
}
}
这套方案的核心是让行距始终跟随字号的缩放而缩放，而不是用一个固定像素值强行锁定。但要注意，如果某些业务场景确实需要绝对固定的行距，例如设计稿要求段落行距永远是28px，无论字号多少都不变，那么可以使用像素值，并禁止在该段落内修改字号。同时还要考虑letter-spacing和word-spacing对视觉行距的影响，虽然它们不直接改变行高，但会增加字与字之间的横向空间，让视觉上感觉行距变窄，必要时需要小幅增加line-height补偿。
还有一种隐蔽的情况：使用line-height固定了行距，但是文本中的<br>换行符会造成额外的空行。因为<br>本身会创建一个新的行盒，该行盒只包含一个换行符，其高度仍然由line-height决定。如果段落行距是1.5，那么<br>产生的换行也会占用1.5倍行高，这个高度和正常行距一致，并不会造成额外间距。但如果手动写了多个<br>，就会叠加出多个空行，用户可能会误以为是行距配置失效。
最后总结一下固定CSS行距的几个核心原则：首选无单位数字作为line-height的值，从根元素开始统一规划；处理内联元素时注意其自身字号变化对行盒高度的影响，必要时用vertical-align修正；响应式场景下避免使用绝对值锁定行距，否则字体缩放后会破坏排版。只要遵循这三条，绝大多数的行距漂移问题都能迎刃而解。
CSS行距line-height固定行距修改时间：2026-10-06 07:48:47