HTML5空格导致布局错乱解决方法

• 给父容器设置 font-size: 0，子元素单独恢复字号（注意继承与重置）
• 移除 HTML 源码中
  标签间的换行和空格（即写成

  ...

  ...

  ），可读性差但有效
• 用注释“吃掉”空白：
• 改用 flex 或 grid 布局替代 inline-block —— 它们天然忽略源码空白

pre 标签和 white-space 属性对空格的控制逻辑

</code> 会原样保留所有空白和换行，但它本质是块级元素，且有默认 <code>white-space: pre</code>。真正灵活的是 CSS 的 <code>white-space</code> 属性：</p>
<ul><li><code>white-space: normal</code>（默认）：合并空白，换行由内容宽度触发</li>
<li><code>white-space: nowrap</code>：合并空白，强制单行，溢出不换行</li>
<li><code>white-space: pre</code>：保留所有空白和换行，类似 <code><pre></code></li>
<li><code>white-space: pre-wrap</code>：保留空白和换行，但允许自动换行</li>
<li><code>white-space: pre-line</code>：合并空白，保留换行符，再按需折行</li>
</ul><p>常见误用：给按钮内文字加 <code>white-space: nowrap</code> 防止换行，却忘了它同时会吞掉中间多个空格——此时若依赖空格分隔图标和文字，可能意外粘连。</p>

<h3>JavaScript 动态插入 HTML 时的空格陷阱</h3>
<p>用 <code>element.innerHTML = '<span>A</span> <span>B</span>'</code> 插入带空格的字符串，那个空格会被当作文本节点渲染，效果等同于手动写 HTML 空格。而用 DOM API 创建则完全可控：</p>
<pre class="brush:php;toolbar:false">const spanA = document.createElement('span');
spanA.textContent = 'A';
const spanB = document.createElement('span');
spanB.textContent = 'B';
container.appendChild(spanA);
container.appendChild(document.createTextNode(' ')); // 显式控制要不要空格
container.appendChild(spanB);