本文详解为何直接设置 height 和 width 会导致嵌套列表结构崩溃，并推荐使用语义正确、兼容性良好的 line-height 属性来安全收紧列表行距。
本文详解为何直接设置 `height` 和 `width` 会导致嵌套列表结构崩溃，并推荐使用语义正确、兼容性良好的 `line-height` 属性来安全收紧列表行距。
在 CSS 布局中，line-height 是控制文本行间距的核心属性，而 height 和 width 则用于定义元素的盒模型尺寸。当开发者误用 li { height: 0; width: 0; } 来“压缩”列表项时，实际破坏了 <li> 元素的渲染基础：
-
height: 0强制将行内内容（包括子<ol></ol>）挤压至不可见高度； -
width: 0进一步导致块级子元素（如嵌套<ol></ol>）无法正常获得父容器宽度，触发浏览器重排异常； - 最终结果是嵌套列表“脱离层级”，在 Chrome 和 Edge 中表现为悬浮到底部或错位显示——这并非 bug，而是 CSS 盒模型与渲染规则的必然行为。
✅ 正确做法：使用 line-height 控制视觉行距line-height 作用于行框（line box），不影响元素盒尺寸，天然支持嵌套继承，且对列表结构零侵入：
ol, ul {
/* 重置默认上下边距，避免干扰行高效果 */
margin: 0;
padding-left: 20px;
}
li {
line-height: 1.2; /* 推荐值：1.0–1.4 之间，兼顾可读性与紧凑性 */
/* 可选：微调字体大小以增强紧凑感 */
font-size: 0.95em;
}
? 关键注意事项：
-
避免设为
line-height: 1（无单位）：虽能极致压缩，但若子元素含inline-block或vertical-align元素，可能引发基线对齐异常；建议使用无单位数值（如1.2）或em/rem单位，确保相对缩放。 -
嵌套列表自动继承：子
<ol></ol>内的<li>默认继承父级line-height，无需重复声明；如需差异化（如外层宽松、内层更紧），可局部覆盖：ol ol li { line-height: 1.05; } -
慎用
height配合line-height：若必须限制高度（如卡片式列表），应仅对容器设height，并配合overflow: hidden，而非直接作用于<li>。
? 进阶提示：结合 margin 微调垂直节奏
单纯依赖 line-height 有时不足以消除 <li> 间的视觉空隙。此时可补充负 margin（需谨慎）或统一使用 margin-block-start/end（现代 CSS）：
li {
line-height: 1.2;
margin-block: 0.2em; /* 替代 margin-top/margin-bottom，更语义化 */
}
总结：列表行高优化的本质是理解 CSS 渲染层级——line-height 操控内容流，height/width 操控容器框。坚持“内容优先”原则，用对属性，才能让嵌套结构既紧凑又健壮。
