list-style-position: inside 会使项目符号计入内容区，padding-left 从符号左侧起算导致缩进“变小”；需额外补偿约1em，且 ul/ol 默认样式跨浏览器不一致，建议重置 margin/padding 并优先用 margin-left 和 em/rem 控制缩进。
list-style-position: inside 会影响 padding-left 的视觉效果
当 list-style-position 设为 inside 时，项目符号（如 •）被算进元素内容区，此时设置 padding-left 会从符号左侧开始计算，导致文字和符号整体向右偏移，但缩进“看起来”比预期小。这是最常被误判为“padding 不生效”的原因。
- 默认值是
outside，符号在盒模型外，padding-left只推文字，符号位置固定 -
inside下若想保持文字首行对齐，需额外增加padding-left补偿符号宽度（约 1em） - 用
box-sizing: border-box对ul/ol无效——列表项的盒模型行为由渲染引擎决定，不完全遵循标准 box-sizing
ul/ol 的默认 margin 和 padding 在不同浏览器中不一致
Chrome、Firefox、Safari 对 ul 和 ol 的默认 margin-top/margin-bottom 和 padding-left 值不同，尤其在嵌套列表里容易叠加出意外空白。
- 重置时建议统一写：
ul, ol { margin: 0; padding: 0; }，再按需添加 - 仅靠
padding-left控制缩进不可靠：Firefox 默认padding-left: 40px，Chrome 是40px但含 UA 样式干扰 - 更稳妥的方式是用
margin-left替代padding-left控制整体缩进，避免内边距影响点击热区或背景色范围
用 em/rem 设置 list-item 缩进比 px 更健壮
列表项（li）本身没有内置缩进逻辑，真正起作用的是父容器 ul/ol 的 padding-left。用相对单位能适配字号变化，比如响应式场景下 font-size 动态调整时，padding-left: 2em 始终保持约两字符宽缩进。
-
1em≈ 当前font-size值，对可变字体或用户缩放更友好 - 避免用
px写死，否则在高 DPI 屏或系统字号放大时缩进显得过窄 - 如果父元素
font-size被重设（如ul { font-size: 0.9em; }），子li的em基准也会变，注意层级影响
伪元素 + flex 模拟自定义列表缩进（绕过 UA 样式干扰）
当需要精确控制符号与文字间距、或兼容老版本 Safari 对 list-style-position: inside 的渲染 bug 时，放弃原生列表样式，改用 ::before 生成符号 + display: flex 对齐更可控。
- 示例：
li { display: flex; align-items: flex-start; } li::before { content: "•"; margin-right: 0.5em; flex-shrink: 0; } - 这样
padding-left完全失效，缩进由margin-right和 flex 布局决定 - 注意：屏幕阅读器可能无法识别这种伪元素符号，如需无障碍支持，得加
aria-label或保留原生list-style并覆盖样式
实际项目里最容易漏掉的是嵌套列表的 padding-left 叠加和 list-style-position 的隐式继承——改一个地方，二级列表可能突然错位。动手前先用 DevTools 检查 computed 样式里的 padding-left 和 list-style-position 实际值，比猜更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
