list-style-position: inside 不能解决编号缩进问题，因为它仅改变编号在内容流中的位置，不控制编号与文字间的间距；真正有效的是 ::marker 的 margin-inline-end，它专用于调节标记与文字的水平间距，且兼容现代浏览器。
list-style-position: inside 为什么不能解决编号缩进问题
因为 list-style-position: inside 只是把编号拉进内容流，但不控制编号和文字之间的空白距离；它会让编号和第一行文字紧贴，换行后文字又顶到左边缘，视觉上反而更乱，尤其在多行列表项里根本不可控。
- 真正影响“编号与文字间距”的，是
::marker的margin-inline-end（推荐）或margin-right（旧写法） -
list-style-position控制的是整个li块级盒子的布局位置，不是编号和文字间的间隙 - 用
text-indent或padding-left调整li会连带影响编号位置，容易错位
::marker margin-inline-end 是最直接有效的调节方式
现代浏览器（Chrome 89+、Firefox 68+、Safari 15.4+）支持 ::marker 伪元素，它专用于选中有序/无序列表的标记部分（比如 1.、•），且只作用于标记本身，不影响文字排版。
- 设置
margin-inline-end: 0.5em就能精准拉开编号和文字的距离，单位建议用em或ch，适配字体大小 - 避免用
margin-right：在 RTL 文本（如阿拉伯语）下可能方向反了；margin-inline-end始终指向内容流末尾，更健壮 - 不能设置
display、width、height等布局属性——::marker只接受有限样式：color、font相关、content和margin相关
ol li::marker {
margin-inline-end: 0.75em;
color: #555;
}
兼容性 fallback：用 counter-reset + ::before 模拟 marker
如果必须支持 Safari 15.3 或更老版本（它们不认 ::marker），就得手动接管编号逻辑。这不是“替代”，而是降级方案——本质是放弃原生 ol 的语义和可访问性优势，仅作视觉对齐。
- 先用
counter-reset: item和counter-increment: item重建计数器 - 用
li::before插入编号，并通过margin-inline-end控制间距（同::marker） - 必须显式加
content: counter(item) "."，否则没编号；注意小数点、括号等要手写 - 屏幕阅读器可能无法正确播报序号，除非额外加
aria-label或role="listitem"
ol.fallback {
counter-reset: item;
list-style: none;
}
ol.fallback li {
counter-increment: item;
}
ol.fallback li::before {
content: counter(item) ".";
margin-inline-end: 0.75em;
color: #555;
}
别忽略 line-height 和 font-size 对视觉间距的影响
即使 ::marker 的 margin 设对了，如果 li 的 line-height 过大或 font-size 不一致，编号和第一行文字的垂直对齐仍会发飘——看起来像“间距不均”，其实是基线没对齐。
立即学习“前端免费学习笔记（深入）”；
-
::marker默认继承父级line-height，但它的垂直居中逻辑和文本不同；加vertical-align: middle通常无效 - 稳妥做法：统一
li和::marker的font-size（比如都设为1rem），再微调margin-inline-end - 遇到超大字号列表（如标题级
ol），建议用ch单位设margin-inline-end，比如margin-inline-end: 1.2ch，比em更贴合数字宽度
margin-inline-end 的值往往要试 2–3 次才能和字体、行高匹配上；很多人卡在这一步，不是 CSS 写错了，是没意识到编号的视觉“距离”其实是三个变量共同作用的结果：margin、font-size、line-height。 
