标签前出现意外空格
" />
HTML 中 等行内元素若因换行或缩进与相邻文本分离，会因空白字符（换行符、空格）被浏览器解析为文本节点而渲染出多余空格；解决关键是消除源码中标签间的不可见空白。
html 中 `` 等行内元素若因换行或缩进与相邻文本分离，会因空白字符（换行符、空格）被浏览器解析为文本节点而渲染出多余空格；解决关键是消除源码中标签间的不可见空白。
在 HTML 渲染过程中，换行符和缩进空格在行内上下文中会被视为普通空白字符，并参与排版。当你将 标签单独换行书写时：
<span> Some text<sup>®</sup></span>
实际上等价于：
<span> Some text <sup>®</sup></span>
其中换行 + 缩进（即 \n）被解析为一个包含换行与空格的文本节点，导致 前出现视觉上可察觉的间隙（尤其在字体较小时更明显）。
✅ 正确做法是：让 紧贴前文末尾，不引入任何空白字符：
<div> <span>Some quite long text that I'd love to separate from sup element<sup>Sup content</sup></span> </div>
或者，若需兼顾可读性，可采用以下两种专业级方案：
方案一：注释法（推荐用于多行维护场景）
利用 HTML 注释“吞噬”空白，保持结构清晰且无渲染副作用：
<span>Some text<!-- --><sup>®</sup></span>
✅ 原理： 是注释节点，不生成任何文本内容，有效阻断前后文本节点的空白连接。
方案二：CSS 层面重置（全局可控）
对 设置 font-size: 0.6em; line-height: 0; 并确保父容器 font-size 统一，但不建议仅为此目的使用 CSS——因为语义化结构应优先由 HTML 保证，样式仅作增强。
⚠️ 注意事项：
- 不要依赖 white-space: nowrap 或 letter-spacing 修复，这会破坏文本流与可访问性；
- 避免在 前后手动添加 或零宽空格（如 ），增加维护复杂度且可能引发兼容性问题；
- 若使用模板引擎（如 Vue/React），注意其默认保留空白行为，可启用 v-pre、{...} 插值紧贴写法，或配置 preserveWhitespace: false（Vue）。
总结：HTML 空白即内容。对 、、 等语义化行内标签，坚持“标签紧邻文本”的编写习惯，是最简洁、可靠、符合标准的实践方式。
