li 标签默认没有 margin；浏览器显示的间距主要来自 ul/ol 的默认 padding（如 chrome 的 padding-left: 40px）或换行符产生的空白字符。
li 标签默认有 margin 吗？
没有。li 元素本身不带 margin，浏览器渲染的间距通常来自 ul 或 ol 的默认 padding（比如 Chrome 默认 padding-left: 40px），或者行内换行产生的空白符（文本节点）被渲染成空格。
为什么给 li 加 margin 会错位或重叠？
常见于 display: inline-block 或 float: left 布局下：li 间的换行符生成空格字符，被当作 4px 左右的间隙；此时再加 margin-right 就会叠加，导致宽度超限、换行异常。
无序列表中直接写 margin-bottom 看似正常，但若父容器用了 line-height 或 vertical-align，可能引发基线对齐偏移，视觉上像“上下错位”。
- 用
margin控制li间距时，优先考虑ul上统一设padding，而非每个li单独设margin - 需要等距分隔时，改用
gap（配合display: flex或grid）更可靠 - 若必须用
margin，建议只设margin-bottom并配合:last-child { margin-bottom: 0 }避免末尾多余空隙
flex 布局下 li 间距用 margin 还是 gap？
gap 是更干净的选择：它不参与盒模型计算，不会触发 margin collapse，也不受 display 类型限制（flex 和 grid 都支持），且能自动避开首尾元素。
立即学习“前端免费学习笔记（深入）”；
而用 margin 在 flex 容器里容易踩两个坑：
-
margin-left/margin-right在justify-content: center下会破坏居中逻辑 - 响应式断点切换时，
margin值需手动重置，gap可直接用媒体查询覆盖 - IE 不支持
gap，但 IE 也不支持现代flex的多数特性，真要兼容就别用flex布局li了
如何安全清除 ul/li 的默认间距？
最稳妥的是同时重置 ul 的 padding 和 margin，而不是只盯 li：
ul {
margin: 0;
padding: 0;
}
li {
list-style: none; /* 顺手去掉项目符号 */
}注意：margin: 0 必须显式写，不能依赖继承——ul 在不同 UA stylesheet 中默认值不一致（Firefox 有时是 margin-block-start/end: 1em）。
如果用了 CSS Reset（如 normalize.css），也要确认它是否已处理 ul，否则可能重复覆盖或漏掉。
复杂点在于：有些设计系统会在 ul 上加语义化 class（如 list-unstyled），这时候清除逻辑就藏在 class 里，得翻源码看它到底动了 padding 还是 margin，不能盲目套用通用重置。
