浏览器对ol默认设margin-top/margin-bottom约1em、padding-left约40px，直接清零会破坏序号对齐与嵌套层级；微调应优先改ol的上下边距或li的line-height，避免外边距合并与空白字符干扰。
ol 默认 margin 和 padding 是哪几个值
浏览器对 ol 有内置默认样式，主要影响垂直间距的是 margin-top、margin-bottom 和 padding-left。Chrome 和 Firefox 都设为约 1em 上下边距，40px 左侧内边距；Safari 类似，但部分版本对嵌套 ol 的 margin 计算更保守。
这些值不是“bug”，而是浏览器为了语义可读性做的基础排版保障。直接清零（如 ol { margin: 0; padding: 0; }）会导致序号紧贴内容、嵌套层级消失，反而更难调。
- 只微调时，优先改
margin-top/margin-bottom，保留padding-left维持序号对齐 - 若要缩紧
li之间距离，不要碰ol的padding，改li的margin或line-height - 嵌套
ol里，外层margin和内层margin可能发生外边距合并，导致实际间距小于预期
li 之间空隙过大，到底是 margin 还是 line-height 搞的鬼
两种情况必须分开判断：
如果 li 是块级（默认），空隙主要来自：ol 的上下 margin + li 的 margin（浏览器不设默认，但你可能写了）+ line-height 对多行文本的撑开效果。
如果 li 设了 display: inline-block，那空隙大概率是 HTML 换行符渲染成的空白字符——它受父容器 font-size 控制，和 margin 无关。
- 检查开发者工具里
li的 computed margin：若为0，但仍有空隙 → 看line-height或空白字符 -
line-height值大于font-size时，会放大单个li的高度，尤其当内容换行或含br时更明显 - 用
border: 1px solid red包裹li，看实际框高是否等于line-height，就能确认是不是它在撑开
微调 ol/li 间距最稳的三步法
别一上来就全局重置，先定位再动刀：
① 先锁定目标：给 ol 加临时 outline: 1px solid blue，确认是 ol 自身边距还是 li 内部撑开；
② 若是 ol 边距过大，用 ol { margin-top: 0.8em; margin-bottom: 0.6em; } 微调，比清零更可控；
③ 若是 li 之间松散，优先用 li { line-height: 1.4; } 收紧，比设 margin 更少副作用（尤其避免外边距合并）；
- 嵌套列表时，在内层
ol上加margin-top: 0;，防止两层margin叠加 - 想让序号和文字更紧凑？改
ol { padding-left: 32px; }，别碰li的padding - 用
line-height调整时，务必用无单位数值（如1.4），避免子元素字号变化后行高断裂
inline-block 的 li 间隙怎么消又不伤可读性
这是高频翻车点：把 li 拉成横向导航后，发现按钮之间总有条缝。这不是 margin，是 HTML 换行符被当成空白字符渲染出来的。
最安全的做法不是删换行，而是控制它的“尺寸”：
- 给
ol或ul设font-size: 0;，再给li单独设回font-size: 16px;—— 缝就没了，代码还能换行 - 别用
letter-spacing: -4px或负margin，前者会影响文字渲染，后者在缩放或响应式下容易错位 - 如果
li里有图标或复杂结构，用flex替代inline-block：ol { display: flex; flex-wrap: wrap; gap: 8px; }，现代浏览器支持好，IE 不在考虑范围
真正容易被忽略的是：哪怕你没写任何 margin，line-height 和空白字符这两股力会同时作用在 li 上，调试时得关掉一个再看另一个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
