当 `line-height` 被设为极小值（如 `2px`）时，行间距严重不足，导致相邻 `

` 元素的文本视觉上相互覆盖；应使用无单位数值（如 `1.4`）或移除该属性让浏览器自动计算合理行高。

在 CSS 中，line-height 控制的是行框（line box）的高度，而非单纯“行与行之间的空白”。当你将 line-height: 2px 应用于字体大小为 16px 的段落时，实际行高远小于文字本身所需空间（通常字母上下延伸区 + 行内间距需至少 1.0–1.2em），导致多行文本挤压、基线错位，甚至使后续 <p> 元素的首行直接“叠”在前一个段落的末行之上——这就是你观察到的“文本覆盖”现象。

✅ 正确做法是：

word报告自动生成神器

Word报告自动生成神器。自动生成专业Word文档报告，支持模板填充、目录生成、表格/图表插入、页眉页脚、多级标题、样式主题、批量邮件合并。当用户需要生成Word报告、创建合同文档、批量生成通知/证书、填充Word模板、制作商业计划书时触发。

下载

• 优先使用无单位数值（推荐）：它基于当前 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 不是用来“压缩段落”的工具，而是保障文本呼吸感与可读性的关键排版属性。合理设置，才能让内容清晰、专业、易于阅读。

立即学习“前端免费学习笔记（深入）”；