本文详解如何通过 line-height 安全调整嵌套有序列表（）的垂直间距，避免误用 height/width 导致 DOM 结构塌陷、嵌套层级丢失等渲染异常问题。
本文详解如何通过 line-height 安全调整嵌套有序列表（<ol></ol>）的垂直间距，避免误用 height/width 导致 dom 结构塌陷、嵌套层级丢失等渲染异常问题。
在实际前端开发中，为提升列表内容的紧凑性，开发者常尝试通过 height: 0px 或 width: 0px 缩小 <li> 元素尺寸——但这是一种根本性误用。height 和 width 属于盒模型尺寸控制属性，强制设为 0 会破坏 <li> 的块级渲染流，尤其当其内部包含子元素（如嵌套 <ol></ol>）时，浏览器将无法正确计算布局上下文，导致子列表“脱离嵌套关系”，视觉上坠落至父列表末尾（Chrome/Edge 均复现此行为），本质是触发了不可预测的重排（reflow）异常。
✅ 正确解法：使用语义匹配的 line-height
line-height 专用于控制行内内容的垂直间距，它不影响元素盒模型尺寸，不干扰文档流，天然兼容嵌套结构。其值可为无单位数字（推荐）、em、rem 或 px：
li {
line-height: 1; /* 推荐：无单位值，相对于 font-size 计算，继承性好 */
}
/* 进阶微调（更紧凑） */
li {
line-height: 0.85;
}该设置会均匀压缩所有 <li> 内文本行距，包括顶层项与嵌套项，且保持嵌套层级的 HTML 结构完整性与 CSS 渲染树逻辑一致性。
⚠️ 注意事项：
-
禁用
height/width重置：切勿对<li>设置height: 0、width: 0或display: inline-block等破坏默认块级行为的样式； -
避免影响计数器：
line-height不干扰<ol></ol>的自动编号机制，而错误的height可能遮挡序号或导致编号错位； -
响应式友好：使用无单位
line-height（如1.2）可随font-size缩放，适配不同屏幕； -
调试建议：若仍见间距异常，检查是否存在外边距（
margin）、内边距（padding）或margin-top/bottom的隐式叠加，可统一重置：ol, ul, li { margin: 0; padding: 0; } li { line-height: 1.1; }
总结：控制列表“紧密度”的核心在于理解 CSS 属性的语义边界——line-height 是行间距的唯一正交解，而 height/width 属于容器尺寸控制，混用将引发布局崩溃。坚持语义化用法，嵌套列表的结构稳定性与视觉一致性自然得到保障。
