html中连续空格、换行和缩进会被解析器统一折叠为单个空格，这是规范行为而非bug；其根源在于html解析阶段的空白字符序列处理，与css或字体无关。
HTML模板里的空格不会按你写的数量渲染，这是规范行为，不是bug。直接敲多个空格、换行或缩进，在最终页面上大概率被压成一个空格甚至完全消失。
为什么模板里写了一堆空格却只显示一个
浏览器解析HTML时，会把标签间换行、缩进、连续空格全部归为“空白字符序列”，然后统一折叠成单个空格。这包括：
<div>和<code><p></p>之间的换行- JS模板字符串里用
`<span>${name}</span> <span>${age}</span>`中间的空格 - Vue/React组件中写
<button>确定</button> <button>取消</button>产生的间隙 - 父容器加
font-size: 0，子元素再单独设font-size（注意会影响em单位） - 用
white-space: nowrap配合display: inline-block，再用margin精确控制间距 - 改用Flex布局：
display: flex天然无视HTML空格，间隙靠gap控制 - 用HTML注释“吃掉”空格：
<span>a</span><!-- --><span>b</span> - 用
trim类工具先清理数据，再拼接 - 用
单价 100 元 - 用CSS控制间距：
word-spacing或margin-inline-start比依赖模板空格更稳定 - 纯静态内容：用
<pre class="brush:php;toolbar:false;"><code>...</code></pre>，语义清晰，浏览器默认样式友好 - 动态内容（如API返回的日志文本）：给容器设
white-space: pre-wrap，保留空格和换行，同时允许长行自动折行 - 避免
white-space: pre——它禁止折行，容易撑破容器 - 慎用
white-space: break-spaces：Chrome支持好，Firefox/Safari兼容性弱，移动端易出错
关键点在于：这个折叠发生在HTML解析阶段，和CSS无关，也和字体无关——哪怕你把font-size设成0，它照样只留一个空格。
inline元素间空隙的根源与解法
当你用display: inline或display: inline-block排按钮、图标、标签时，标签间的换行/空格会被渲染成真实像素宽度（通常是当前font-size的0.25em左右），导致无法对齐。
常见但不推荐的做法是删掉模板换行，写成<span>a</span><span>b</span>——可读性差，维护成本高。
更可控的解法：
模板引擎里动态插入空格的风险
像Handlebars、EJS、Vue模板中，常有人这么写：{{name}} {{age}}，指望中间那个空格生效。但一旦name为空或undefined，就变成 18，开头多一个空格，可能破坏对齐或触发意外换行。
安全做法：
尤其注意：SSR渲染时，服务端返回的HTML已折叠完毕，前端JS再操作innerHTML也无法还原原始空格数量。
预格式化内容该用<pre class="brush:php;toolbar:false;"></pre>还是white-space
需要保留缩进、多空格、换行的场景（如代码块、诗歌、CLI输出），别硬塞一堆 ——既难读又难维护。
正确姿势：
最后提醒一句：空格问题表面是“怎么加”，实际是“谁该负责”。内容层（HTML）只管结构，样式层（CSS）才该决定间距、缩进、换行——越早把空格逻辑从模板里剥离，后续越少踩坑。
