在网页排版中，无序列表和有序列表是最基础的内容容器，但很多人在写页面时会发现，浏览器默认的li间距要么过大要么几乎没有，导致视觉层次混乱。要让列表项之间保持合适的留白，本质上是在控制每个li盒子在垂直或水平方向上的外部空间。理解盒模型与布局上下文，是正确设置li间距的前提。
一、使用margin设置li间距
最直接的方式是给li元素添加外边距。在普通文档流中，块级li默认竖直排列，给每一个li加上margin-bottom就能在两项之间插入固定空隙。这种做法兼容所有浏览器，也是早期前端最常用的手段。
但要注意，如果给每个li都设置margin-bottom，最后一个li也会多出底部空白，在紧贴父容器底部时可能产生多余间隙。一种折中方案是使用相邻兄弟选择器，只为前方的li添加下边距，从而避免尾部多余空间。
/* 给所有li加下边距 */
ul.list li {
margin-bottom: 12px;
}
/* 使用相邻选择器，最后一项无下边距 */
ul.list li + li {
margin-top: 12px;
}
上面的第二段代码利用li + li选中除第一个以外的li，统一加上margin-top，这样首个li上方和末个li下方都不会有多余间距。不过在嵌套列表中，子ul的li也会受此影响，需要额外重置。
二、使用Flex布局与gap属性
当ul被设为弹性容器时，传统margin方案仍然可用，但更现代的做法是使用gap属性。gap只在弹性项之间生效，不会在容器边缘产生额外空白，语义上就是“项与项的间隔”，非常直观。
以下示例将ul变为纵向flex容器，并设置gap: 10px，所有li之间都会出现十像素间隔，且首尾贴合父容器。对于横向导航菜单，只需把flex-direction改为row，gap同样控制左右间距。
ul.flex-list {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
padding: 0;
}
/* 横向菜单 */
ul.nav {
display: flex;
flex-direction: row;
gap: 16px;
}
gap的优势在于不必关心首尾项，也不会引发外边距叠加（margin collapsing）问题。但它的兼容性集中在近几年的浏览器版本，若项目需支持陈旧环境，仍需回退到margin方案。
三、通过line-height与padding调整
如果li内部只是单行文本，增大line-height可以自然撑开每行的框高，从而让视觉上的行间距变大。这种方法没有改变盒子外边距，只是让行内框更高，适合纯文字列表。
另外，给li加padding会改变内容区与边框的距离，虽不直接产生项间空白，但配合背景色时能做出卡片效果。下面代码展示了用line-height控制紧凑列表：
ul.text-list li {
line-height: 2;
padding: 0 8px;
}
这种写法没有外边距叠加风险，但在多行文本li中，line-height只影响行与行，不会在li盒子之间插入空间，因此复杂列表还是应优先用margin或gap。
四、不同场景下的选择建议
对于简单文章列表，使用li + li的margin-top最为稳妥；对于组件化导航或卡片列表，flex加gap代码更干净。若列表项需换行且带背景，可组合padding与gap避免边缘空隙。
下表归纳了三种方式的特点：
| 方法 | 首尾空白 | 适用布局 | 兼容性 |
|---|---|---|---|
| margin | 需额外处理 | 普通流/弹性 | 全部浏览器 |
| gap | 无 | 弹性/网格 | 现代浏览器 |
| line-height | 无 | 单行文本 | 全部浏览器 |
实际开发中，先确认列表的布局模型，再选用对应间距方案，可以省去大量后期调试时间。