list-style-position: inside会导致序号紧贴文字，因序号不生成空白字符；推荐用::marker { content: counter(list-item) ". " }添加空格，兼容现代浏览器；旧版浏览器则退回到outside配合padding-left控制间距。

list-style-position: inside 会导致序号紧贴文字

默认情况下，ol 或 ul 的序号（如 1.、2.）和列表项文本之间没有空格，尤其当设置 list-style-position: inside 时，序号会“挤进”内容区域，视觉上完全贴住文字。这不是 bug，而是 CSS 规范行为——序号本身不生成可样式化的空白字符。

用 ::marker 伪元素加空格最干净

::marker 是专门控制序号样式的标准方案，支持现代浏览器（Chrome 86+、Firefox 80+、Safari 15.4+）。它允许你直接在序号后插入空格或其它分隔符，且不影响布局流。

实操建议：

• 用 content 重写序号，显式添加空格：

  ol li::marker {
    content: counter(list-item) ". ";
  }

• 若需多个空格或制表位，用  （数字空格）比普通   更稳，宽度匹配数字字体：

  ol li::marker {
    content: counter(list-item) ". ";
  }

• 避免用 padding-left 或 text-indent 模拟空格——这会破坏对齐，尤其多行文本时序号和文字错位

兼容老浏览器：用 list-style-position: outside + padding-left

IE 或旧版 Safari 不支持 ::marker，此时只能退回到传统布局。关键不是“加空格”，而是“控制序号和文字的水平距离”。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

要点：

• 必须设 list-style-position: outside（这是默认值，但显式声明更安全）
• 用 padding-left 扩大 ol 左侧内边距，为序号留出空间：

  ol {
    list-style-position: outside;
    padding-left: 2em;
  }

• 序号本身位置由 margin-inline-start（或 margin-left）微调，但不要动它——浏览器已按规范预留了间隙，强行改容易引发跨浏览器差异

注意 counter() 的计数起点和分隔符耦合问题

如果你用 counter-reset 自定义起始值，或嵌套多层列表，content: counter(list-item) ". " 中的空格会参与整个字符串渲染。这意味着：

• 空格会被继承到子列表的 marker 中，可能造成缩进异常
• 若用 counter(list-item, lower-alpha)，空格仍有效，但要注意字母序号后是否真需要空格（比如 “a. text” vs “a.text”）
• 某些 PDF 生成工具（如 wkhtmltopdf）对 ::marker 支持不全，空格可能丢失——上线前务必在目标环境实测

真正难处理的不是加空格，而是让空格在所有层级、所有输出通道里稳定存在。优先走 ::marker 路线，fallback 方案只兜底 IE 和极老安卓 WebView。

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