富文本中li间距失控的根本原因是浏览器对ul/ol的默认盒模型、继承行高、margin折叠和伪元素行为四者混合作用；统一重置必须同时处理这四层，缺一不可。
富文本中列表项（li）的间距异常，根本不是“样式没写对”，而是浏览器对 ul/ol 的默认盒模型、继承行高、margin 折叠和伪元素行为混合作用的结果；统一重置必须同时处理这四层，缺一不可。
为什么富文本里的 li 间距总失控
富文本编辑器（如 TinyMCE、Quill、ProseMirror）输出的 HTML 通常不带 class，只靠原生标签语义渲染。此时：li 继承父级 line-height（常为 1.4–1.6），自身又带默认 margin-top: 1em，而 ul 默认有 padding-left —— 这三者叠加，加上 li::before（项目符号）仍走 content-box，视觉间距就完全不可控。
- Computed Styles 里看到
line-height: 1.5却没设过？八成是继承自body或编辑器容器 -
li的上下 margin 会折叠：相邻li实际间距 = max(上一个的margin-bottom, 下一个的margin-top) - 哪怕清了
margin，li::before若未设box-sizing: border-box，其生成的内容尺寸仍可能撑开行高
必须全局重置 box-sizing 并覆盖伪元素
只写 * { box-sizing: border-box; } 不够——富文本中项目符号由 li::before 渲染，它不继承通配符设置，在 Safari 和旧版 Chrome 中会按 content-box 解析，导致符号位置偏移或换行错乱。
- 务必显式声明：
*::before, *::after { box-sizing: border-box; } - 对富文本容器加一层更精准的范围控制，避免污染全局：
.rich-text *::before, .rich-text *::after { box-sizing: border-box; } - 表单类内联元素（如
input、textarea）在富文本嵌入场景下也容易出问题，补一句：.rich-text input, .rich-text textarea, .rich-text select { box-sizing: border-box; }
用 gap 替代所有 li 的 margin，但需绕过 ul/ol 的限制
ul 和 ol 默认是 display: block，不支持 gap。强行设 display: flex 会破坏列表语义（屏幕阅读器无法识别序号），且 flex-direction: column 下 row-gap 才生效——但此时 li 必须显式设 flex-basis: auto，否则高度塌陷。
- 安全做法：将
ul/ol包一层div，该div设为display: flex; flex-direction: column; gap: 12px; -
li自身清空所有 margin：.rich-text li { margin: 0; }（包括margin-top和margin-bottom） - 若需保留序号或圆点，
li::before改用content+position: absolute模拟，避免干扰gap计算
行高与垂直对齐必须单独收口
富文本中 li 内常混排图片、链接、code 等行内元素，line-height 会以整行基线为准拉伸，造成“看起来间距变大”。这不是 margin，调 margin 无效。
- 统一设
.rich-text li { line-height: 1.4; }，避免继承放大 - 对含图片的
li，加align-items: flex-start（需父容器为 flex）或vertical-align: top（针对 inline-block 图片） - 若内容高度差异大，用
min-height: 1.4em配合line-height锁定最小行高，比单纯设height更健壮
真正难处理的从来不是某一个属性，而是富文本输出不可控：你无法预判用户是否粘贴了带内联 style 的 li，或嵌套了多层 div。所以重置规则必须带 !important（至少对 margin 和 line-height），并放在富文本容器样式表的最末尾。否则，编辑器自带的 reset 会悄悄覆盖你的修复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
