HTML中空格折叠现象导致超链接前后换行或缩进被渲染为可见空格，解决方法包括：用white-space:nowrap封装父元素、删除源码中标签的换行缩进、或用 替代语义性空格。
超链接文本前后空格被渲染成可见间隙
直接在 <a> 标签内写文字时，如果标签前后或内部有换行、缩进或多余空格，浏览器会把它们折叠为一个空格并渲染出来——尤其当 <a> 是 inline 元素（默认）且父容器未限制 white-space 时，这个空格就可能撑开链接与相邻文字的间距，造成“两端多出空格”的视觉错位。
用 white-space: nowrap 封装链接最稳妥
这不是给 <a> 自身加样式，而是包裹它的父级（比如 <span> 或 <p>）设 white-space: nowrap。这样能阻止浏览器把源码中链接前后的换行/空格解析为可渲染空格。
- 适用场景：导航栏、按钮组、行内操作项等需要紧凑排列的链接
- 注意：
nowrap会让整段内容不换行，若文本过长需配合overflow: hidden或text-overflow: ellipsis - 别误设在
<a>上——它只控制内部文本换行，不解决标签级空白问题
删 HTML 源码中 <a> 标签的换行和缩进
静态 HTML 中，把链接写成紧贴上下文的一行，是最轻量、无 CSS 依赖的解法：
<p>点击<a href="/login">登录</a>或<a href="/register">注册</a>。</p>
对比错误写法：
立即学习“前端免费学习笔记（深入）”；
<p>点击 <a href="/login">登录</a> 或 <a href="/register">注册</a> 。</p>
- 换行符会被解析为一个空格，导致“点击 登录 或 注册 。”中间出现三处额外空隙
- 该问题在
inline-block链接上更明显，但inline同样受影响 - ES6 模板字符串动态插入时也要连写：
`<a href="https://www.php.cn/link/b85b19cea2f0268e105f30d78f668250">${text}</a>`，不能换行
用 替代语义性空格要谨慎
如果真需要在链接文字里保留多个空格（比如对齐、缩进排版），必须用 ，但仅限于链接内容内部；它不能解决标签外的空白。
-
<a href="#">首页 下载</a>→ 文字间三个不可断行空格 -
<a href="#">首页</a> <a href="#">下载</a>→ 两个链接之间三个空格（不推荐，破坏语义） -
真正麻烦的不是空格本身，而是它混在 HTML 结构里又看不见——调试时得打开开发者工具看“实际渲染的文本节点”，而不是只盯源码缩进。一旦发现链接两端莫名多出空白，优先查它前后有没有换行或空格字符，再决定用 CSS 还是重构 HTML。
