ol 间距问题主要由默认 margin 和 line-height 叠加导致，应重置 margin、用无单位 line-height 控制行高，优先 padding 调整留白，保持 list-style-position: outside 并显式设置 padding-left；需自定义编号时可用 CSS 计数器，但需补充语义；响应式下 line-height 宜用无单位值，调试时逐层关闭属性定位根源。

ol 默认行高和外边距导致的间距问题

浏览器对

有默认样式：顶部和底部通常带 margin（约 1em），列表项

默认用 display: list-item，行高由字体和 line-height 决定。所谓“间距大”，多数是这两层叠加的结果，不是

自身可调的“列表间距”属性。

实操建议：

• 先重置
  的 margin：margin: 0; 或按需设为 margin-top: 0.5em; margin-bottom: 0.5em;
• 控制行间距，改 line-height（作用于
  或
• ），例如 line-height: 1.4;；避免设为 1（可能造成文字紧贴）
• 若需微调上下留白，优先用 padding 替代 margin，防止与其他块级元素发生外边距合并（margin collapse）

list-style-position: inside 会改变视觉对齐和间距感

默认 list-style-position: outside 时，序号在内容左侧区域外，

的 padding-left 由浏览器隐式控制；设为 inside 后，序号进入内容盒内，此时

的宽度包含序号，文本缩进变少，视觉上“行距更挤”，且可能触发换行异常。

实操建议：

• 保持 list-style-position: outside（默认值），通过 padding-left 显式控制缩进，例如 ol { padding-left: 2rem; }
• 如必须用 inside，务必同步设置 padding-left: 0; 并手动加 text-indent 或包裹 控制文本起始位置
• 注意：Safari 对 inside 的渲染略有偏差，测试时需覆盖该浏览器

用 counter-reset / counter-increment 精确控制编号与间距

当需要自定义编号格式（如 “1.”、“一、”、“Step 1:”）或跨元素连续编号时，CSS 计数器比原生

更可控，也能规避部分默认间距干扰。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

实操建议：

• 用 counter-reset: step; 在父容器声明计数器，
• 上用 counter-increment: step;
• 编号内容用 ::before 伪元素生成，例如：content: "Step " counter(step) ": ";
• 此时
• 是纯块级元素，所有间距（包括编号与文本之间）都可用 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 属性看变化，比查文档更快。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！