本文详解如何通过 line-height 属性安全、可靠地减小有序/无序列表的行间距，避免误用 height/width 导致嵌套结构塌陷或布局错乱，并提供可立即复用的代码示例与最佳实践。
本文详解如何通过 `line-height` 属性安全、可靠地减小有序/无序列表的行间距，避免误用 `height`/`width` 导致嵌套结构塌陷或布局错乱，并提供可立即复用的代码示例与最佳实践。
在前端开发中，为列表（尤其是多层嵌套的 <ol></ol> 或 <ul></ul>）设置更紧凑的垂直间距是常见需求。但许多开发者尝试直接设置 li { height: 0; width: 0; } 来“压缩”列表项，结果却导致子列表（如内层 <ol></ol>）脱离正常文档流——在 Chrome 和 Edge 中表现为嵌套项“掉落到底部”，完全失去缩进与层级关系。这并非浏览器 Bug，而是由 CSS 盒模型与布局机制决定的必然结果。
❌ 错误做法：滥用 height 和 width
li {
height: 0px; /* 破坏行盒（line box）高度计算 */
width: 0px; /* 强制内容区域坍缩，影响 inline-level 子元素定位 */
}
该写法会强制重置 <li> 的块级盒高度，使内部的嵌套 <ol></ol> 失去可靠的包含块（containing block），同时干扰 display: list-item 的默认渲染逻辑，最终破坏列表计数器、缩进和垂直对齐。
✅ 正确方案：使用 line-height 控制文本行距
line-height 是专为控制行内内容垂直间距设计的属性，它作用于行框（line box），不影响元素盒模型尺寸，天然兼容嵌套结构：
ol, ul {
margin: 0;
padding-left: 20px; /* 保留基础缩进 */
}
li {
line-height: 1.2; /* 推荐值：1.0–1.3 之间，兼顾可读性与紧凑性 */
/* 可选：微调字体大小以增强紧凑感 */
font-size: 0.95em;
}
/* 针对深层嵌套，可逐级递减 line-height（谨慎使用） */
li li {
line-height: 1.15;
}
li li li {
line-height: 1.1;
}
配合 HTML 结构：
<ol>
<li>第一项</li>
<li>第二项
<ol>
<li>嵌套第一项</li>
<li>嵌套第二项</li>
</ol>
</li>
<li>第三项</li>
</ol>
✅ 效果：所有层级保持正确缩进、计数连续、视觉紧凑，且完全响应式友好。
⚠️ 注意事项与进阶建议
-
避免
line-height: 1在含图标/复杂内联内容时使用：若<li>内含<img>、<span class="icon"></span>或vertical-align: middle元素，过小的line-height（如1）可能导致基线对齐异常或文字截断。推荐从1.2起调，再逐步降低验证。 -
慎用
!important或全局重置：不要对* { line-height: 1; }这类规则滥用，应限定作用域（如.compact-list li）。 -
结合
margin微调间距：若需进一步压缩列表项间空白，可补充margin-bottom: -2px;（负边距），但需测试跨浏览器一致性。 -
CSS Modules / Scoped CSS 场景：在 React + CSS Modules 中，建议将紧凑样式封装为独立类名（如
list--compact），避免污染全局li样式。
总结
调整嵌套列表的垂直密度，核心在于理解 CSS 布局层级：height 操控容器盒子，line-height 操控文本行框。前者粗暴、易破环结构；后者精准、语义清晰、天然支持嵌套。始终优先选择 line-height，辅以合理的 font-size 和 margin 组合，即可在不牺牲可维护性与兼容性的前提下，实现专业级的列表紧凑排版。
