17370845950

根本原因是浏览器默认样式与行内/块级渲染差异导致视觉错觉；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 可能因四舍五入渲染出半像素错位。