padding-left不能直接控制列表项图标位置，因其仅影响内容区域左边界，而默认list-style-position: outside使图标位于容器外侧；需用list-style-position: inside或text-indent负值调整，或改用自定义图标方案。
padding-left 不能直接控制列表项图标位置
浏览器渲染 ul 或 ol 时，项目符号（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 更混乱。不重置就写死样式，列表在不同环境缩进不一致，尤其嵌套时层级错乱明显。
- 上线前必须加全局重置：
ul, ol { padding-left: 0; } - 后续缩进统一用
padding-left显式设置，比如padding-left: 24px，避免依赖 UA 样式 - 嵌套列表要单独处理，例如
ul ul { padding-left: 16px; }，别指望继承父级 padding
用 padding 模拟图标间距时，line-height 和 font-size 要同步调
当用 padding-left 给每个 li 加左侧空隙来“撑开”图标与文字距离，如果 line-height 过大或 font-size 缩小，会导致文字下沉、视觉上图标和文字不对齐。
- 推荐组合：固定
line-height: 1.5，font-size: 14px，再设padding-left: 32px（留出图标+间隙） - 图标用
background-image时，padding-left必须 ≥ 图标宽 + 间距，否则文字会覆盖图标 - 用
rem或em设padding-left时，注意它随font-size缩放，不是纯像素偏移
移动端 touch 区域太小，padding 是最稳妥的放大手段
列表项点击热区窄，用户手指点不准，光靠 height 或 min-height 不够——内容少时高度塌缩，padding 才是稳定撑开可触控区域的首选。
立即学习“前端免费学习笔记（深入）”；
- 给
li加padding: 12px 16px，比只设height: 44px更可靠 - 横向 padding 别省，
padding-right防止文字贴边，padding-left留图标空间，两者缺一不可 - 避免在
li里套a再给a加 padding，不如直接让li可点击，减少 DOM 层级和 focus 管理麻烦
padding 看似简单，但和 list-style-position、line-height、设备像素比全绑在一起，改一处常连带三处偏移。动手前先 inspect 元素看 computed padding 和 list-style offset 的真实数值，比猜更省时间。 
