最稳妥的列表项间距方案是用 margin-bottom：给 li 设 margin-bottom，ul 清除默认边距并可加 padding-bottom 保持末项呼吸感；gap 是现代推荐方案但需兼容性兜底；border-bottom 需配合 :not(:last-child) 避免多余边框。
用 border-bottom 配合 :not(:last-child) 最可靠
直接给 加 border-bottom 会导致最后一项多出多余边框，视觉上不干净。最稳妥的做法是只给除最后一项外的所有项加底边框。
实操建议：
- 给
list-style: none去掉默认符号，避免样式干扰 - 对
使用border-bottom: 1px solid #e0e0e0+:not(:last-child) - 若列表项内有内边距（
padding），边框会出现在内容下方；如需边框撑开间距，改用margin-bottom更可控
ul {
list-style: none;
padding: 0;
}
li {
padding: 12px 0;
border-bottom: 1px solid #e0e0e0;
}
li:not(:last-child) {
border-bottom: 1px solid #e0e0e0;
}
用 margin-bottom 比边框更灵活
如果目标只是“让列表项之间有间隔”，margin-bottom 往往比边框更合适——它不参与绘制、不影响盒模型计算逻辑、兼容性更好，也更容易响应式调整。
常见错误现象：只设 margin-bottom 却没清空父容器的 padding 或默认 margin，导致顶部/底部空白异常。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
margin: 0 -
设margin-bottom: 16px，最后一项自动无下边距 - 如需最后一项也保持一致呼吸感，可对整个
padding-bottom: 16px
ul {
margin: 0;
padding: 0;
}
li {
margin-bottom: 16px;
}
ul {
padding-bottom: 16px;
}
避免用 border-top + :not(:first-child) 的陷阱
虽然语法可行，但 border-top 在滚动或动画场景下容易引发重绘问题，尤其在移动端 WebKit 内核中，可能造成边框闪烁或错位。
使用场景限制：
- 仅适用于静态、无交互的纯展示列表
- 若列表后续要加 hover 效果或 JS 动态增删项，
border-top会让 DOM 变更后样式重排更难预测 - IE11 及更早版本不支持
:not()伪类嵌套，若需兼容，必须用 class 控制
Flex 布局下用 gap 是未来方向
现代浏览器已普遍支持 display: flex + flex-direction: column + gap 组合，这是语义最清晰、控制最精准的方式——gap 专为“项间间距”而生，不污染边框、不干扰点击区域、不触发重排。
注意点：
-
gap对display: flex或display: grid - 设为
flex后，默认变成行内排列，需加flex-direction: column - Safari 14.1+ 才完整支持
gap在 flex 中的表现，旧版 Safari 需降级处理
ul {
display: flex;
flex-direction: column;
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
}
实际项目中，margin-bottom 仍是兼容性与维护性平衡最好的选择；gap 值得在新项目中优先尝试，但务必确认目标环境支持度；边框方案只在明确需要“视觉分隔线”而非“间距”时才启用。 
