列表项视觉间距过大主因是line-height继承放大和margin外边距合并；应优先检查computed中line-height值，统一用gap或仅设margin-bottom并:last-child清除末项间距。
列表项默认行高导致视觉间距过大
浏览器对 <ul></ul> 和 <li> 有默认样式，其中 <li> 继承父级行高（通常为 1.2 或 1.5），若列表内含多行文本或行内元素，line-height 会直接撑开垂直空间，造成“看起来间距很大”但实际没设 margin 的假象。
- 检查是否误以为是
margin问题，实则是line-height过大 - 用浏览器开发者工具选中
<li>，在Computed面板看line-height实际值 - 若内容只有一行文字，可将
line-height设为与font-size接近（如16px字体配line-height: 1.2或直接line-height: 1.4em）
margin 和 padding 混用时的常见冲突
初学者常同时设置 li { margin-bottom: 10px; } 和 ul { padding-left: 20px; }，但未意识到：相邻 li 的 margin-bottom 与下一个 li 的 margin-top 会发生外边距合并（margin collapse），导致实际间距并非简单相加。
- 只用
margin-bottom控制列表项间距，避免给li设margin-top - 若需首项不顶头、末项不贴底，改用
ul的padding-top/padding-bottom - 不想受外边距合并影响？给
li加display: inline-block或float: left（但需清除浮动）——不过更推荐用gap（见下一条）
现代方案：ul 上用 gap 替代单个 li 的 margin
CSS Grid / Flex 布局普及后，gap 已在所有主流浏览器支持（包括 display: flex 和 display: grid 容器），而 ul 本身不是 flex 容器，需显式声明：
ul {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
padding: 0;
}
<p>li {
margin: 0; /<em> 清除默认或自定义 margin </em>/
}-
gap不会合并，不依赖兄弟元素，数值即真实间距 - 必须配合
display: flex或display: grid才生效，纯block流布局下无效 - 若列表需要响应式换行（如横向导航菜单），用
flex-wrap: wrap+gap更可控
兼容旧浏览器时的稳妥写法
IE11 及更早版本不支持 gap，也不支持 display: flex 下的 flex-direction: column 在 ul 上稳定表现。此时应回归传统方式，并主动规避外边距合并：
立即学习“前端免费学习笔记（深入）”；
ul {
margin: 0;
padding: 0;
}
<p>li {
margin: 0 0 12px 0; /<em> 只设 bottom margin </em>/
}</p><p>/<em> 清除最后一项的多余底部间距 </em>/
li:last-child {
margin-bottom: 0;
}- 务必重置
ul的margin和padding，否则浏览器默认样式会干扰 - 用
:last-child移除末项margin-bottom是最常用且可靠的收尾手段 - 若列表动态渲染（如 Vue/React），注意
:last-child在虚拟 DOM 中仍有效，但不要依赖:nth-last-child(1)等复杂伪类
行高和外边距看似简单，但它们在列表中常常叠加作用；调试时优先查 line-height 是否被继承放大，再确认 margin 是否因合并而失效——这两个点漏掉一个，调半天也看不出哪来的空隙。
