html5空格在spa中会因inline/inline-block元素间渲染为可见间隙，影响布局与可访问性；推荐用flex布局消除空格依赖，或通过fragment、css font-size:0、ssr压缩配置等策略精准控制空白。
HTML5空格在SPA里会意外影响布局和可访问性
单页应用（SPA）中，HTML源码里的空格、换行、制表符常被忽略，但它们在 display: inline 或 display: inline-block 元素间会渲染为一个空格字符，导致不可预期的间隙。Vue/React等框架生成的模板若未显式处理，这个问题更隐蔽。
- 服务端渲染（SSR）输出的HTML空格会被浏览器如实解析，而客户端渲染（CSR）中JS动态插入DOM时，
textContent和innerHTML对空白的处理逻辑不同 -
white-space: pre或pre-wrap会让空格/换行“可见”，在日志展示、代码块等场景有用，但在按钮组、导航栏中极易引发错位 - 无障碍（a11y）要求：屏幕阅读器会把连续空格合并为一个停顿，但若空格出现在
<button></button>内部文本前后，可能读出冗余停顿，影响语义
React/Vue模板中避免换行导致的空格间隙
组件模板里写成多行是为了可读性，但 JSX 和 Vue SFC 的编译器默认保留文本节点中的空白，尤其在 map() 渲染列表时：
{items.map(item => (
<span key={item.id}>
{item.name}
</span>
))}
上面的换行+缩进会在每个 <span></span> 前后插入空格节点，最终渲染出多余间隙。解决方式不是删换行，而是控制空白策略：
- 用
React.Fragment（>）包裹并紧贴书写：<>{item.name}</> - Vue 中启用
collapseWhitespace: true（Vue CLI 4.5+ 默认开启），或在模板根元素加v-pre局部禁用编译 - 对内联元素组统一设
font-size: 0父容器，再对子元素重置font-size—— 简单粗暴但有效
CSS中用 display: flex 替代 inline-block 消除空格依赖
这是最推荐的现代解法。只要父容器设了 display: flex，子元素间的HTML空格就完全不参与布局计算：
立即学习“前端免费学习笔记（深入）”；
-
flex不吃空格，也不吃换行，天然免疫这类问题 - 注意
flex-wrap: wrap下仍需控制子项margin避免视觉间隙，别误以为“空格没了就万事大吉” - 旧项目改用
flex时，检查是否覆盖了第三方UI库的样式（比如某些ant-btn-group内部用了inline-block）
服务端渲染（SSR）时HTML压缩不能盲目删空格
用 html-minifier-terser 或 Webpack 的 HtmlWebpackPlugin 压缩HTML时，collapseWhitespace: true 很诱人，但它会把 <pre class="brush:php;toolbar:false;"></code>、<code><textarea></code>、<code><code></code> 里的有意义空格也干掉。</p>
<ul>
<li>必须配 <code>ignoreCustomFragments</code> 排除高亮代码块：<pre class="brush:php;toolbar:false;">/<pre class="brush:php;toolbar:false;"[^]*>[\s\S]*?<\/pre>/i</pre>
<li>Vue SSR 的 <code>vue-server-renderer 默认不压缩，需手动加 renderer.renderToString(app, { runInNewContext: false }) 后再走独立压缩流程
_document.tsx 时仍要检查 dangerouslySetInnerHTML 插入的HTML是否被二次破坏<div> 之间的回车惹的祸。越靠近用户界面层（尤其是涉及文字对齐、按钮组、图标+文字组合），越要主动验证渲染结果是否受空白影响。</div> 
