HTML默认合并连续空白符是规范行为；内联元素间缝隙源于源码换行被解析为空格，可用font-size:0、flex或注释解决；文本多空格需用 等实体，布局调间距应优先用letter-spacing等CSS属性。

为什么直接敲空格没用

HTML默认会把连续空格、制表符、换行符全部合并成一个空格，这是规范行为，不是bug。你在编辑器里敲10个空格，浏览器只渲染1个；回车换行也基本被忽略——除非你用

或white-space干预。

内联元素之间有奇怪的缝隙怎么办

这是最常被误认为“空格问题”的实际布局干扰：当、等内联元素写在不同行时，HTML源码里的换行符会被解析为一个空格字符，再结合当前font-size，最终渲染出约font-size / 3宽的间隙（比如font-size: 16px时约5–6px）。

解决它不靠删空格，而靠控制渲染逻辑：

• 父容器设font-size: 0，子元素再单独设font-size（注意继承影响）
• 改用display: flex，天然无视源码空白，再配gap精确控距
• 把所有内联元素写在同一行（牺牲可读性，不推荐）
• 用注释挤掉换行，如AB

想让文本里多个空格原样显示

别用普通空格键，用HTML实体：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

•  ：不可换行空格，宽度≈1个英文字符，连续写几个就占几格
•  ：半角空格，约1/2汉字宽，适合中西文混排微调
•  ：全角空格，≈1个汉字宽，中文场景下对齐更稳
•  ：窄空格，比 更细，适合标点后呼吸感

注意： 末尾的分号;不能省，否则无效；这些实体只作用于文本内容，不影响布局结构。

需要整体拉大/压缩文字间距

用CSS而非空格实体更可控：

• letter-spacing：调单个字符间距离，对中英文都生效，支持负值（慎用，易重叠）
• word-spacing：只影响单词之间（以空格分隔的单元），对中文几乎无感
• white-space: pre-wrap：配合
  使用，既保留换行和空格，又允许自动折行

  真正难处理的是混合场景：比如一段含 的中文标题，又套了letter-spacing——这时实体空格的宽度会叠加CSS间距，容易失控。优先选一种方式，别叠用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！