ol列表项无空行是因浏览器默认样式未设li上下外边距，属规范行为；应通过li的margin-bottom统一控制间距，避免br、空li或p嵌套等错误方式。
ol列表项之间为什么没有空行？
浏览器对 <ol></ol> 和 <li> 的默认样式不包含上下外边距，所以连续的 <li> 会紧贴排列，看起来“没空行”。这不是 bug，而是规范行为：列表项是流式内联块级元素，默认只靠换行符分隔，而 HTML 忽略源码换行。
用 margin 控制 <li> 间距最可靠
直接给 <li> 设 margin-bottom 是最直观、语义清晰、响应式友好的方式。
- 避免只设
margin-top—— 第一项顶部会多出空白，破坏对齐 - 推荐写法：
<ol style="margin: 0;"> <li style="margin-bottom: 16px;">第一项</li> <li style="margin-bottom: 16px;">第二项</li> </ol> - 若所有
<li>都要统一间隔，用 CSS 类更干净：ol.spaced li { margin-bottom: 1.2em; } - 注意外边距合并（margin collapse）：如果
<ol></ol>自身有margin-bottom，又给最后一个<li>加了margin-bottom，可能叠加出双倍空隙
别用 <br> 或空 <li> 模拟空行
这两种做法看似简单，但实际埋坑：
-
<li>第一项<br><br>第二项</li>—— 空行属于内容，会被读屏器朗读，且无法响应字体缩放 -
<li>第一项</li> <li> <li>第二项</li>—— 空<li>仍算一个列表项，编号会跳（如 1, [空], 2），也影响无障碍和 SEO - 用
<p></p>套在<li>外强行撑开？违反嵌套规则（<p></p>不可作为<li>的子元素）
想让整个列表“呼吸感”更强？控制 <ol></ol> 自身间距
列表整体与上下文的留白，应由 <ol></ol> 的 margin 承担，而不是靠内部 <li> 撑开。
- 常见误操作：给每个
<li>加margin-bottom: 24px，再给<ol></ol>加margin-top: 24px→ 实际顶部留白翻倍 - 合理分工：
<ol></ol>负责自身与段落/标题的间距（如margin: 1.5em 0），<li>只负责项与项之间的间隙（如margin-bottom: 0.75em） - 如果父容器是 Flex 或 Grid，优先用
gap替代margin，天然防合并、更可控
<br>、空标签和 margin，调试时很难区分是内容结构错乱，还是样式覆盖冲突。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
