当 css 中 `line-height` 被设为极小值（如 `2px`），会导致行高远小于字体实际高度，引发上下段落文字相互覆盖；正确做法是移除该值或使用无单位数值（如 `1.4`）让浏览器自动计算合理行高。
在 CSS 中，line-height 控制的是行框（line box）的高度，而非单纯“文字间距”。当你将 .main-section p { line-height: 2px; } 应用于 16px 字体时，浏览器会强制将每行内容压缩进仅 2px 高的空间——这远低于字体的 x-height、升部（ascender）和降部（descender）所需空间，结果就是多行文本被强行挤压，甚至导致相邻 <p> 元素的行框发生视觉重叠（即“文字覆盖”现象）。
✅ 正确解决方案有以下两种：
-
移除 line-height，启用浏览器默认行为
浏览器对 <p> 元素默认应用约 1.1–1.2（取决于字体）的无单位 line-height，能自适应字体度量，安全可靠：
.main-section p {
font-size: 16px;
word-spacing: 1px;
color: #252426;
/* line-height 已移除 → 使用浏览器默认值 */
}-
显式设置合理的无单位 line-height（推荐）
使用无单位数值（如 1.4、1.6）是最佳实践——它基于当前 font-size 计算，具备可伸缩性且避免像素陷阱：
.main-section p {
font-size: 16px;
word-spacing: 1px;
line-height: 1.5; /* 等效于 24px，足够容纳 16px 字体及呼吸感 */
color: #252426;
}⚠️ 注意事项：
- ❌ 避免使用过小的绝对长度值（如 2px、4px），极易破坏可读性与可访问性；
- ❌ 不要混用 line-height 和 height 控制段落高度——height 会截断内容，line-height 影响行内布局；
- ✅ 若需精确控制垂直节奏，建议结合 margin-bottom 调整段落间距（例如 margin-bottom: 1.5em），而非依赖 line-height 挤压。
总结：line-height 的核心作用是保障行内内容的垂直可读空间。新手常误以为“越小越紧凑”，实则适得其反。坚持使用无单位数值或完全省略，才能兼顾语义清晰、响应式友好与无障碍支持。
