CSS如何利用Padding优化列表排版，精准调整缩进与图标间距离？

本文共计863个文字，预计阅读时间需要4分钟。

浏览器渲染时，项目符号（bullets 或 numbers）默认在容器外侧，使用 `padding-left` 只影响内容区域的左侧边界，不会动图标志本身。强行加大 `padding-left` 看似缩进，实则将文字向右推，图标仍保留在原始位置，易造成视觉错位或中断。

• 用 list-style-position: inside 才能让图标进入盒模型内，此时 padding-left 才对图标和文字整体起作用
• 若保持 list-style-position: outside（默认），想调图标间距得靠 text-indent 配合负值，但兼容性差、响应式下易崩
• Flex 或 Grid 布局中，干脆放弃原生列表，用 div + ::before 自定义图标，padding-left 控制间距更可靠

ul ol 的 padding 默认值因浏览器而异

Chrome 和 Firefox 对 ul 的默认 padding-left 是 40px，Safari 是 20px，IE 更混乱。不重置就写死样式，列表在不同环境缩进不一致，尤其嵌套时层级错乱明显。