项目列表间距混乱的根源在于内外边距未统一控制或 margin/padding 混用且值不一致；应分清二者用途、统一基准（如 li 统一设 margin-bottom）、避免叠加，并注意重置默认样式、合理使用 gap 或清除空格干扰。
项目列表间距混乱，通常是因为没有统一控制内外边距，或者混用了 margin 和 padding 且值不一致。解决核心是：**明确用途、统一基准、避免叠加**。
分清 margin 和 padding 的作用
margin 是元素外部的空白，用于控制它和邻近元素的距离；padding 是元素内部的空白，影响内容与边框之间的距离。列表项（如 li）之间要留空，优先用 margin；如果想让文字离列表符号或边框远一点，才用 padding。
给 li 统一设置 margin-bottom
这是最常用也最稳妥的方式。避免用 margin-top（容易引发外边距合并问题），统一在每个 li 下方加间距：
- li { margin-bottom: 12px; }
- 最后一项不需要下边距？可加 li:last-child { margin-bottom: 0; }
- 想等距又不想写 :last-child？改用 ul { line-height: 1.6; } 配合 li { margin: 0; }，靠行高间接控制视觉间距（适合纯文字列表）
避免父容器 padding 干扰子元素布局
如果 ul 或 ol 自带默认 padding-left（浏览器样式），会挤占空间、让列表看起来不对齐。重置一下更可控：
立即学习“前端免费学习笔记（深入）”；
- ul, ol { padding-left: 0; }
- 需要缩进？改用 ul { padding-left: 20px; } 显式设定，并同步调整
li的margin值，保持整体节奏一致 - 若用 flex 或 grid 布局列表，
padding和margin的行为会变化，此时建议统一用 gap 控制间距（如 display: flex; flex-direction: column; gap: 12px;）
检查是否有多余的换行或空格导致“看不见的间距”
HTML 中 li 标签间的换行符，在 display: inline 或 inline-block 时会被渲染为空格。如果列表是横向排列却出现意外间隙：
- 把
li设为 display: block;（默认值），或用 float: left; + 清除浮动 - 改用 display: flex; 父容器，天然忽略文本空格
- 实在要用 inline-block？在 HTML 中删掉
li之间的换行，或设父元素 font-size: 0;，再给li单独设字体大小
