本文详解如何通过 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 属于容器尺寸控制，混用将引发布局崩溃。坚持语义化用法，嵌套列表的结构稳定性与视觉一致性自然得到保障。