当 `line-height` 设置过小（如 `2px`）时，行高不足以容纳字体本身的高度，导致相邻 `
` 元素内容视觉上重叠；正确做法是使用无单位数值（如 `1.5`）或直接省略以启用浏览器默认行高计算。
在 CSS 中，line-height 控制的是行框（line box）的高度，而非单纯的文字间距。当你将 line-height: 2px 应用于 16px 字体时，实际可用垂直空间远小于字体的字体大小（font-size）、上升部（ascent）和下降部（descent）所需空间——现代浏览器通常需要至少 1.0–1.2 倍字体大小才能完整显示一行文本。2px 不仅远低于安全阈值，甚至小于大多数字体的笔画粗细，必然造成文字挤压、截断或与下一段落重叠。
✅ 正确写法推荐以下三种方式之一：
- 省略 line-height：让浏览器自动计算（通常等效于 line-height: normal，约为 1.1–1.2，取决于字体）
- 使用无单位数值（推荐）：例如 line-height: 1.5，表示「字体大小的 1.5 倍」，具有继承性且响应式友好
- 使用 em 或 rem：如 line-height: 1.5em（效果类似无单位值，但计算逻辑略有差异）
? 修改后的推荐 CSS：
.main-section p {
font-size: 16px;
word-spacing: 1px;
line-height: 1.5; /* ✅ 安全、可读、自适应 */
color: #252426;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免使用 px、pt 等绝对单位设置 line-height（除非有特殊排版需求），因其无法随字体缩放而调整，损害可访问性；
- line-height: 0 或极小值（如 < 1em）极易引发渲染异常，应严格避免；
- 若需紧凑排版（如标签、按钮内文），优先通过 padding 和 margin 控制整体间距，而非压缩 line-height。
总结：line-height 不是“行与行之间的空白”，而是“整行所占高度”。合理设置它，是保障文本可读性与布局稳定性的基础一步。
