列表行间距过挤的根本原因在于ul/ol的默认margin、li内嵌元素的margin及line-height设置不当，需重置外边距、合理设置无单位line-height并配合margin-bottom控制项距。
直接改 line-height 就能解决，但别只盯着它——列表行间距太挤，八成是 margin 和 padding 在捣鬼，不是行高本身的问题。
为什么改了 line-height 还是挤？
因为 ul 和 ol 默认有上下 margin，li 本身没外边距，但里面常套 p、span 或链接，这些元素自带 margin 或默认行高。你调 line-height 只影响文字基线间距，不压根儿消除块级元素之间的空隙。
-
ul默认有margin-top和margin-bottom（通常 1em），会撑开整个列表区域 -
li内嵌的p也有上下margin，叠加后视觉上“挤”其实是“堆叠” -
line-height: 1.2对小字号li可能反而让文字贴得太近，尤其含图标或复选框时
li 的行高怎么设才不塌陷？
给 li 设 line-height 是最直接的，但必须配合字体大小一起看。单独设 line-height: 1.6 没用，如果 li 里文字实际字号是 14px，那 1.6 算出来才 22.4px，还是紧。
- 优先用无单位值：
li { line-height: 1.8; }—— 它会按li自身font-size计算，子元素（如span）也能继承并重新缩放 - 避免用
px固定值，比如line-height: 20px，一旦父容器字号响应式变化，行高就僵死不动 - 如果
li里混用不同字号（如带small的备注），加一句vertical-align: top;防止基线错位拉高整行
列表项之间真正要调的是什么间距？
“行间距太挤”用户真正在意的，往往是相邻 li 之间的垂直距离，这个距离由三部分组成：上一项的下 margin、本项的 line-height、下一项的上 margin。最干净的解法是砍掉冗余 margin，只靠 line-height 和 padding 控制节奏。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 重置默认：
ul, ol { margin: 0; padding-left: 2rem; }（保留缩进，去掉上下空） - 统一控制项距：
li { margin-bottom: 0.6rem; line-height: 1.7; }——margin-bottom明确定义项间空隙，比依赖line-height推算更可控 - 若用
display: flex布局li（比如横向菜单），gap比margin更可靠，不会受折叠影响
移动端列表特别容易踩的坑
在小屏上，line-height 值稍小就会让文字糊在一起，而系统字体渲染差异会让同一段 CSS 表现不一。别迷信桌面端调好的值。
- 别用
line-height: 1或1.2—— iOS Safari 对小字号渲染偏“矮”，文字容易粘连 - 用
rem或em做margin-bottom，比如margin-bottom: 0.75em，随根字号缩放，比固定px更稳 - 真要兼容老 Android WebView，加一行
* { line-height: normal !important; }后再覆盖，不然某些版本会忽略自定义值
行高只是表象，列表的呼吸感来自 margin、line-height、padding 的协同取舍。改一个值前，先用浏览器开发者工具点开每个 li，看清楚到底是哪层盒子在撑开空间——很多时候，删掉一行 margin 比调十次 line-height 更管用。
