直接用gap即可，前提是ul设为display:flex或grid；gap是容器级控制，自动规避首尾空白与换行错位，比margin更稳定可靠。
直接用 gap 就行，前提是列表容器设为 display: flex 或 display: grid；别再靠 margin 算来算去，容易漏掉 :last-child 或响应式错位。
ul + flex + gap 是最稳的组合
传统 ul li 布局想等距，很多人还在写 li:not(:last-child) { margin-right: 16px; }。这在动态增删项、换行、或 JS 渲染时极易失效——:last-child 不一定对应“视觉末尾”，尤其启用 flex-wrap: wrap 后。
正确做法是把 ul 变成 Flex 容器，并启用 gap：
ul {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
-
gap是容器级控制，只作用于项目之间，不触发外边距合并 - 无需处理首尾空白，
gap自动规避 - 换行后，行与行之间（
row-gap）和列与列之间（column-gap）都生效 - 如果只写
gap: 16px，默认等效于row-gap: 16px; column-gap: 16px
gap 在 flex 中失效？先查这三个硬条件
写了 gap 没反应，90% 是以下问题之一：
- 父容器不是
display: flex（比如还是display: block，或误写成display: grid） - 漏了
flex-wrap: wrap—— 若只有一行且未换行，row-gap不生效（因为没“行”） - 同时写了
gap和row-gap/column-gap，后者会覆盖前者对应方向的值
例如：gap: 10px 20px; row-gap: 15px; → 最终行间距是 15px，不是 10px。
Grid 更适合二维等距，但 Flex 足够应付多数列表场景
如果你的列表天然需要“固定列数+自动换行”，比如每行 4 个卡片，grid 写起来更直白：
.list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
但注意：grid 的 gap 对所有行列都生效，且不依赖 flex-wrap；而 flex 的 gap 必须配合 flex-wrap: wrap 才能实现多行等距。实际选型看需求：纯横向导航用 flex + gap；网格画廊类布局优先 grid。
别碰 ul 的 padding-left 控制缩进
想调列表文字缩进，别用 ul { padding-left: 2em } —— 浏览器默认值不一致（Chrome/Firefox/Safari 差异明显），且 list-style-position: inside 会让 padding-left 行为不可预测。
更可靠的做法：
- 重置：
ul, ol { margin: 0; padding: 0; } - 用
margin-left控制整体缩进（不影响点击热区） - 缩进单位优先用
em或rem，适配字号变化
真正影响列表项间距的，是 li 之间的 gap 或 margin，不是 ul 的内边距。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
