ol 间距问题主要由默认 margin 和 line-height 叠加导致，应重置 margin、用无单位 line-height 控制行高，优先 padding 调整留白，保持 list-style-position: outside 并显式设置 padding-left；需自定义编号时可用 CSS 计数器，但需补充语义；响应式下 line-height 宜用无单位值，调试时逐层关闭属性定位根源。
ol 默认行高和外边距导致的间距问题
浏览器对 <ol></ol> 有默认样式：顶部和底部通常带 margin（约 1em），列表项 <li> 默认用 display: list-item，行高由字体和 line-height 决定。所谓“间距大”，多数是这两层叠加的结果，不是 <ol></ol> 自身可调的“列表间距”属性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先重置
<ol></ol>的margin：margin: 0;或按需设为margin-top: 0.5em; margin-bottom: 0.5em; - 控制行间距，改
line-height（作用于<ol></ol>或<li>），例如line-height: 1.4;；避免设为1（可能造成文字紧贴） - 若需微调上下留白，优先用
padding替代margin，防止与其他块级元素发生外边距合并（margin collapse）
list-style-position: inside 会改变视觉对齐和间距感
默认 list-style-position: outside 时，序号在内容左侧区域外，<li> 的 padding-left 由浏览器隐式控制；设为 inside 后，序号进入内容盒内，此时 <li> 的宽度包含序号，文本缩进变少，视觉上“行距更挤”，且可能触发换行异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 保持
list-style-position: outside（默认值），通过padding-left显式控制缩进，例如ol { padding-left: 2rem; } - 如必须用
inside，务必同步设置padding-left: 0;并手动加text-indent或包裹<span></span>控制文本起始位置 - 注意：Safari 对
inside的渲染略有偏差，测试时需覆盖该浏览器
用 counter-reset / counter-increment 精确控制编号与间距
当需要自定义编号格式（如 “1.”、“一、”、“Step 1:”）或跨元素连续编号时，CSS 计数器比原生 <ol></ol> 更可控，也能规避部分默认间距干扰。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
counter-reset: step;在父容器声明计数器，<li>上用counter-increment: step; - 编号内容用
::before伪元素生成，例如：content: "Step " counter(step) ": "; - 此时
<li>是纯块级元素，所有间距（包括编号与文本之间）都可用margin/padding精确调节，无浏览器默认干扰 - 缺点：丧失语义化（屏幕阅读器可能不识别为有序列表），需额外加
role="list"和aria-label补充
响应式场景下 ol 间距容易失效的点
媒体查询中只改 font-size 而忽略 line-height 和 margin 的相对单位，会导致小屏下文字挤在一起或空白过大；另外，rem 基准变化时，未用 em 或无单位数值的 line-height 会失准。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
line-height优先用无单位数值（如1.5），它相对于当前font-size计算，响应式下最稳定 -
margin/padding用em（相对于自身字号）比rem更适合列表项内部节奏控制 - 避免在
@media中单独重写ol li的margin，应统一调控ol的margin和line-height
真正难调的不是“怎么改间距”，而是判断哪一层在起作用——margin、line-height、padding、font-size，甚至 vertical-align（如果里面混了 inline 元素）。打开开发者工具，逐层关掉 CSS 属性看变化，比查文档更快。
