根本原因是浏览器默认样式与行内/块级渲染差异导致视觉错觉；ul有默认外边距，li块级但含inline内容时行高、基线等影响空隙感，且旧重置常漏ul/ol的padding-inline-start。
为什么 li 之间看起来间距不一致
根本原因不是 margin 或 padding 没设，而是浏览器默认样式 + 行内/块级渲染差异导致的视觉错觉。比如 ul 自带 margin-block-start 和 margin-block-end，而 li 默认是块级元素，但若内部含 inline 内容（如纯文本），其行高、字体下降深度、基线对齐都会影响相邻项的“空隙感”。另外，部分旧 CSS 重置漏掉了 ul, ol 的 padding-inline-start，造成左侧缩进干扰视觉节奏。
margin 和 padding 到底该调哪个
优先用 margin 控制列表项之间的垂直距离，因为它是外边距，不影响自身尺寸和内容流；padding 会撑开 li 容器，可能触发换行或影响背景色范围。但要注意：若 li 是 display: inline-block 或参与 Flex/Grid 布局，vertical-align 和父容器 line-height 会覆盖 margin 效果，此时必须统一这两者。
- 纯垂直列表（默认块级）：设
li { margin-bottom: 0.75em; }，再清空ul { margin: 0; padding: 0; } - Flex 排列的
li：用gap（推荐），比margin更可靠：ul { display: flex; flex-direction: column; gap: 0.75em; } - 需兼容 IE：只能用
margin，且要避免在最后一个li上多出空隙 —— 可用li:not(:last-child) { margin-bottom: 0.75em; }
常见踩坑：字体、行高、伪元素悄悄改了间距
即使写了 margin: 0.5em，如果父 ul 的 line-height: 1.2，而 li 里有 sup 或图标字体，基线偏移会让上下项“看起来”一高一低。还有人用 ::before 插入圆点，但没设 vertical-align: middle，也会拉高容器高度。
- 统一
line-height：给ul, li设相同line-height（如1.4），避免继承差异 - 禁用默认列表标记干扰：
li { list-style: none; }，改用background-image或伪元素 +position: absolute控制符号位置 - 检查是否意外触发
display: inline：比如li内部有未闭合的a标签，或用了float，会导致文档流异常
一行代码快速重置（现代项目推荐）
别手写一堆 margin/padding，直接用逻辑属性 + gap 一揽子解决：
立即学习“前端免费学习笔记（深入）”；
ul, ol {
margin: 0;
padding: 0;
}
ul li, ol li {
margin: 0;
}
ul, ol {
display: flex;
flex-direction: column;
gap: 0.75em;
}
注意：Flex 后 li 不再独占一行（除非设 width: 100%），且无法用 :first-child 等选择器微调首项。真要保留传统流式布局，就老实用 margin-bottom + :not(:last-child)。
最易被忽略的是：调整完后务必在真实设备上测小字号（如 iOS Safari 的 13px 文字），此时行高像素对齐误差会被放大，看似一致的 margin 可能因四舍五入渲染出半像素错位。
