正确做法是用list-style-position: inside配合padding控制内边距；若遇换行错位或兼容问题，改用margin-left加text-indent；编号复杂时才用CSS counters接管。
ol列表项的左右内边距不能直接用padding-left/padding-right
因为ol和li默认是块级容器，但编号（marker）由浏览器生成并脱离常规盒模型——直接给li加padding-left会把内容向右推，但编号位置不变，导致文字和编号错位，视觉上“缩进不一致”。
正确做法：用list-style-position: inside + padding
让编号进入li的内容盒，再统一控制内边距：
ol {
list-style-position: inside;
}
ol li {
padding-left: 20px;
padding-right: 10px;
}注意：list-style-position: inside会让编号参与li的宽度计算，此时padding-left才真正“包裹编号+文字”。但副作用是：多行文本时编号可能悬挂在第一行左侧，且在IE旧版本中支持不稳定。
更稳妥的方案：用margin-left + text-indent模拟缩进
适用于需要精确对齐、兼容老浏览器或避免换行错位的场景：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给
ol设padding-left: 0清空默认缩进 - 用
margin-left整体移动列表（含编号） - 用
text-indent单独调整文字起始位置，实现“仅文字缩进”效果
ol {
padding-left: 0;
margin-left: 40px;
}
ol li {
text-indent: -20px;
padding-left: 20px;
}这个组合能确保编号与文字在单行/多行下都对齐，且不影响语义和可访问性。
用CSS counters完全接管编号时最灵活
当你需要自定义编号样式（比如加括号、前缀文字）、或必须精确控制左右间距时，放弃原生list-style，改用counter-reset和::before：
ol.custom {
counter-reset: item;
padding-left: 0;
}
ol.custom li {
position: relative;
padding-left: 40px; /* 左侧留给自定义编号 */
padding-right: 15px;
}
ol.custom li::before {
content: counter(item) ". ";
counter-increment: item;
position: absolute;
left: 0;
width: 30px; /* 控制编号区域宽度 */
}这时左右内边距完全由padding-left和padding-right决定，编号位置彻底可控。但要注意：屏幕阅读器仍依赖原生ol/li结构，所以不要删掉ol和li语义标签，只覆盖视觉表现。
实际项目里，如果只是微调间距，优先试list-style-position: inside；若遇到换行错位或兼容性问题，立刻切到margin + text-indent方案；只有当编号逻辑复杂（如“第1章”“附录A”）才值得上counter——别为简单缩进写一整套计数逻辑。
