当 `line-height` 被设为极小值（如 `2px`）时，行间距严重不足，导致相邻 `
` 元素的文本视觉上相互覆盖；应使用无单位数值（如 `1.4`）或移除该属性让浏览器自动计算合理行高。
在 CSS 中，line-height 控制的是行框（line box）的高度，而非单纯“行与行之间的空白”。当你将 line-height: 2px 应用于字体大小为 16px 的段落时，实际行高远小于文字本身所需空间（通常字母上下延伸区 + 行内间距需至少 1.0–1.2em），导致多行文本挤压、基线错位，甚至使后续
元素的首行直接“叠”在前一个段落的末行之上——这就是你观察到的“文本覆盖”现象。
✅ 正确做法是：
-
优先使用无单位数值（推荐）：它基于当前 font-size 计算，具备可伸缩性与可维护性。例如：
.main-section p { font-size: 16px; word-spacing: 1px; line-height: 1.5; /* = 16px × 1.5 = 24px，自然舒适 */ color: #252426; } - 或完全省略 line-height：浏览器默认会应用约 1.1–1.2 的系数（取决于字体和 UA 样式），通常已足够清晰可读；
- ❌ 避免使用过小的固定像素值（如 2px、4px），尤其当 font-size 显著大于该值时——这本质上破坏了排版的基本可读性原则。
? 小贴士：
- line-height: 1 表示行高等于 font-size，常导致紧凑排版（可能触碰上下行字形）；
- line-height: 1.4–1.6 是中文/英文正文推荐范围，兼顾可读性与留白；
- 若需精细控制垂直节奏，建议结合 margin-bottom（如 margin-bottom: 1.5em）来分隔段落，而非依赖极小 line-height。
总之，line-height 不是用来“压缩段落”的工具，而是保障文本呼吸感与可读性的关键排版属性。合理设置，才能让内容清晰、专业、易于阅读。
立即学习“前端免费学习笔记（深入）”；
