<p>HTML将换行缩进视为空白字符，导致前后多空格；用<!-- -->注释阻断空白最稳妥，兼容性好且易维护；font-size:0有副作用，直接连写难维护。</p>
为什么<sup>前后会多出空格
HTML 把换行符和缩进空格当作普通空白字符处理，当 <sup> 单独换行写时，比如：
<p>版权<sup>®</sup>公司</p>
实际等价于 "版权 ® 公司" —— 换行 + 缩进被解析成一个文本节点，导致 <sup> 前后各多一个空格。这不是 bug，是 HTML 渲染规范决定的。
用 HTML 注释“吃掉”空白最稳妥
把注释插在标签连接处，能阻断空白字符的生成，又不牺牲可读性：
<p>版权<!-- --><sup>®</sup><!-- -->公司</p>
✅ 原理：<!-- --> 是注释节点，不渲染、不占位、不触发排版；
✅ 适合维护：多行结构仍清晰，不会因格式调整意外引入空格；
✅ 兼容所有浏览器，包括旧版 IE。
立即学习“前端免费学习笔记（深入）”；
font-size: 0 在父容器上慎用
对 <div> 等父元素设 font-size: 0 可消除子元素间空白，但有明显副作用：
- 必须给每个子元素显式重置
font-size，否则文字不可见； -
<input>、<select>等表单控件 placeholder 文本可能变小或错位； - 若子元素用了
em或rem单位，计算会受父级0影响，容易出隐性 bug。
直接连写虽快，但只适合简单场景
像这样紧贴书写确实没空格：
<p>版权<sup>®</sup>公司</p>
⚠️ 问题在于：一旦内容变长、逻辑变复杂（比如带条件判断的模板字符串），代码立刻难以阅读和维护；
⚠️ 在 Vue/React 的 JSX 或服务端模板中，这种写法还容易和语法标记冲突；
⚠️ 团队协作时，格式化工具（如 Prettier）可能自动加回换行，导致空格重现。
真正难处理的不是单个 <sup>，而是嵌套在段落、列表、按钮组里的多个行内元素——这时候注释法是唯一兼顾可靠性与可维护性的选择。
