面试必问怎么设置行距从入门到精通实战指南

看了一堆教程还是不会写项目？别慌，这行距设置的坑，我踩过。很多开发同学觉得 line-height 是个基础中的基础，但在大厂面试里，这往往是检验你对 CSS 盒模型、垂直居中原理以及浏览器渲染机制理解的试金石。今天这篇文章，不玩虚的，直接带你从怎么设置行距的底层逻辑出发，结合真实项目案例，实现从入门到精通的跨越。

考点梳理：面试官到底在考什么？

在 Java 或前端面试中，直接问“怎么设置行距”的概率不高，但问“如何完美实现单行/多行文本垂直居中”或“行高对布局的影响”时，答案里必须包含对行距的精准控制。

核心考点拆解：

CSS 规范层面：你知不知道 line-height 的单位区别？无单位数值、em、rem、px 到底有什么本质不同？
盒模型层面：行高不仅仅是文字的高度，它包含了“行盒”（Line Box）的概念。当 line-height 大于 font-size 时，多出来的空间是如何分配的？
渲染引擎层面：不同浏览器（Chrome、Safari、Firefox）在计算半行距（half-leading）时是否有细微差异？
实战场景层面：在 Flex 布局、Grid 布局中，行高如何影响子元素的占位？在移动端适配中，如何避免行高导致的文字裁切？

很多初级开发只知道 line-height: 2 就能把行距拉大，但一旦遇到“文字在按钮里偏下”、“多行文本最后一行行距异常”等问题，就束手无策。这就是从入门到精通的分水岭。

标准答法：构建专业级的回答逻辑

面对面试官，不要只给代码，要给出“原理+方案+验证”的闭环。

第一步：澄清概念 明确指出 line-height 控制的是“行高”，而非单纯的“行距”。在 CSS 术语中，行距（leading）其实是行高与字体大小之差的一半（即半行距）。当 line-height 为无单位数值时，它表示当前元素 font-size 的倍数，并且会继承这个倍数关系，而不是具体的像素值。

第二步：给出最佳实践 推荐在根元素或全局样式中使用无单位数值（如 line-height: 1.5），而在特定组件（如按钮、标题）中使用固定单位或倍数，以确保垂直居中的稳定性。

第三步：指出常见陷阱 主动提及“基线对齐”问题。在 Flex 容器中，如果子元素包含行内文本，默认的 align-items: baseline 会受行高影响。此时，设置 line-height: 1 或调整 align-items 是解决排版错位的关键。

这种回答方式，展示了你不仅会用，还懂“为什么这么用”，以及“在什么情况下不能用”。

代码实现：从基础到进阶的完整示例

下面这段代码涵盖了行距设置的核心场景，包括全局配置、Flex 容器中的行高陷阱，以及多行文本的处理。

/* 1. 全局最佳实践：使用无单位数值，确保继承性 */
:root {font-size: 16px;/* 1.5 是一个通用的可读性比例，适用于正文 */line-height: 1.5;
}body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;color: #333;
}/* 2. 标题与按钮：固定行高或倍数，避免继承导致的间距过大 */
h1, h2, h3 {/* 标题通常不需要太大的行高，1.2 或 1.3 更紧凑 */line-height: 1.2;margin: 0 0 1rem 0;
}/* 3. Flex 布局中的行高陷阱与解决 */
.button-container {display: flex;align-items: center; /* 关键：覆盖默认的 baseline 对齐 */gap: 10px;padding: 10px;border: 1px solid #ddd;
}.btn {/* 按钮内部文本，强制行高为 1，消除额外的半行距空间 */line-height: 1;padding: 8px 16px;background-color: #007bff;color: white;border: none;cursor: pointer;/* 即使 padding 存在，line-height: 1 也能保证文字垂直居中 */display: inline-flex;align-items: center;justify-content: center;
}/* 4. 多行文本的行距控制 */
.paragraph {/* 对于长文本，1.6 到 1.8 的倍率通常阅读体验更好 */line-height: 1.6;max-width: 600px;
}/* 5. 进阶：利用 CSS 变量动态调整 */
.card {--line-height-base: 1.5;padding: 20px;border: 1px solid #eee;
}.card-title {line-height: 1.1;font-weight: bold;
}.card-body {line-height: var(--line-height-base);
}

逐行讲解关键点：

:root 中的 line-height: 1.5：这是“怎么设置行距”最推荐的全局写法。因为它会继承倍数，子元素如果改变 font-size，行高会自动按比例缩放，无需手动调整。
.btn 中的 line-height: 1：这是解决按钮文字垂直偏下的经典技巧。按钮通常有 padding，如果行高大于 1，文字上方和下方会有额外的“半行距”空间，导致视觉上不居中。设置为 1 可以消除这部分冗余空间。
align-items: center：在 Flex 布局中，如果子元素是文本，默认按基线对齐。此时行高越大，基线位置变化越明显，容易造成错位。显式声明 center 是最稳妥的方案。

追问与延伸：面试官可能会深挖的方向

追问 1：为什么 line-height 使用 em 会导致问题？

回答：使用 em 时，子元素会继承父元素的计算后像素值，而不是倍数。如果父元素 font-size: 16px, line-height: 1.5em（即 24px），子元素即使 font-size 变小，行高依然保持 24px，导致行距过大。而无单位数值 1.5 会始终跟随 font-size 变化，更加灵活。

追问 2：在 display: table-cell 中，line-height 和 vertical-align 的关系？

回答：table-cell 默认按基线对齐。line-height 会影响内容的高度，从而影响 vertical-align: middle 的计算。如果内容行高很大，即使 vertical-align: middle，文字也可能显得偏上或偏下。建议在这种情况下，配合 line-height: 1 使用，或改用 Flex 布局。

追问 3：移动端 Safari 浏览器的行高兼容性问题？

回答：Safari 在 iOS 上对某些字体的行高计算可能存在像素偏差。特别是在 font-size 较小（如 12px）且 line-height 为整数像素时，可能出现文字被裁切。建议使用无单位数值，并适当增加 padding 作为缓冲。参考 WebKit 官方源码仓库中的 RenderLineBox 类，可以看到行盒高度的计算逻辑是 max(font-size, line-height)，但具体渲染仍受字体 metrics 影响。

追问 4：如何在 CSS 中实现“首行缩进”的同时不破坏行距？