本文详解为何直接设置 height 和 width 会导致嵌套列表结构崩溃，并推荐使用 line-height 进行安全、可继承的行距控制，同时提供兼容性处理与最佳实践建议。
本文详解为何直接设置 `height` 和 `width` 会导致嵌套列表结构崩溃，并推荐使用 `line-height` 进行安全、可继承的行距控制，同时提供兼容性处理与最佳实践建议。
在 CSS 布局中，调整列表项的紧凑度是常见需求，尤其在构建导航菜单、文档大纲或侧边栏目录时。但许多开发者误用 height 和 width 属性来“压缩” <li> 元素，例如：
li {
height: 0px;
width: 0px;
}
⚠️ 这会导致严重布局问题：
-
height: 0强制将<li>的内容高度坍缩，破坏其作为块级容器的渲染上下文； -
width: 0会挤压内联流，使子元素（如嵌套<ol></ol>）无法正常参与父级 BFC（块格式化上下文），最终导致子列表“掉落”到主列表末尾——这正是你在 Edge 和 Chrome 中观察到的异常行为。
✅ 正确解法：使用 line-heightline-height 专为控制文本行间距而设计，它不影响元素盒模型尺寸，且天然支持继承，能安全作用于多层嵌套结构：
ol, ul {
/* 重置默认上下间距，避免额外空白干扰 */
margin: 0;
padding: 0;
}
li {
line-height: 1.2; /* 推荐值：1.0–1.3 之间，兼顾可读性与紧凑性 */
/* 可选：微调字体大小以增强一致性 */
font-size: 14px;
}
/* 若需更紧凑，可对嵌套层级单独优化 */
li ol li,
li ul li {
line-height: 1.15; /* 比外层略紧，体现层级感 */
}
? 关键原理说明：
-
line-height设置的是行框（line box）的高度，而非元素自身高度；它通过调节基线间距影响视觉密度，不破坏文档流； - 嵌套
<ol></ol>/<ul></ul>作为<li>的子元素，其布局完全由父<li>的line-height和display行为共同决定——只要父<li>保持display: list-item（默认值）且未被height: 0破坏盒模型，嵌套结构就自然成立。
? 进阶提示：消除意外空白
有时即使设置了 line-height，仍见多余间隙，原因常是：
- 列表项内含换行符或空格（HTML 中的文本节点）；
- 浏览器对
<ol></ol>/<ul></ul>默认margin-top/margin-bottom的渲染差异。
推荐防御性写法：
ol, ul {
margin: 0;
padding-left: 20px; /* 保留缩进，避免全清导致无层级感 */
}
li {
line-height: 1.2;
/* 移除文本节点带来的空白（如换行、缩进） */
font-size: 0; /* 先清空文本节点尺寸 */
}
li > * {
font-size: 14px; /* 再为子元素恢复字号 */
}
✅ 总结：
永远避免对 <li> 使用 height 或 width 进行“压缩式”样式控制；应优先采用语义正确、布局安全的 line-height，并配合 margin/padding 微调和字体继承策略。这样既能实现紧凑美观的嵌套列表，又能确保跨浏览器一致性与可维护性。
