html中连续空格被压缩为一个，需用 （如   ）或white-space css属性保留；标签会改变字体和间距，应慎用。

HTML 默认会把连续空格压缩成一个，想显示多个空格必须主动干预——不是写法错了，是浏览器按规范在“帮忙”。

为什么敲十个空格只显示一个

浏览器渲染时遵循“空白折叠”规则：所有连续的空格、制表符、换行符都会被合并为单个空格。这跟代码可读性和语义无关，是 HTML 规范强制行为。

•   是唯一能直接在 HTML 标签内“写出来就生效”的方案，每个   渲染为一个不可断行的空格
• 普通空格键输入的 （U+0020）在标签内连续出现时，不管输几个，最终只显示一个
•   和   分别对应半角、全角空格，宽度固定，但同样需手动写多个才能叠加效果

用   显示三个空格的写法

最轻量、兼容性最好、无需 CSS 的方式就是重复写  ：

<p>左边   右边</p>

注意：  必须带分号结尾，漏掉 ; 会导致解析失败，变成纯文本 &nbsp 显示在页面上。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 不推荐用   或   替代——虽然语义等价，但可读性差，容易手误
• JS 动态插入时可用 ' '.repeat(3)，但服务端模板或静态 HTML 中直接写更稳妥
• 不要混用   和普通空格，比如    ，中间那个普通空格仍会被折叠

用 white-space CSS 控制整段空白

当需要保留一段文本里原有的缩进、对齐或空行时，white-space 比堆   更合理：

• white-space: pre; —— 完全保留空格和换行，行为像 <pre class="brush:php;toolbar:false;"></pre> 标签
• white-space: pre-wrap; —— 保留空格和换行，同时允许自动换行（推荐用于用户输入内容）
• white-space: pre-line; —— 只保留换行，空格仍会折叠（适合日志类文本）

示例：

<p style="white-space: pre-wrap;">姓名：张三    年龄：28    城市：北京</p>

这段里的四个空格会原样显示，且如果容器变窄，文字仍会折行。

<pre class="brush:php;toolbar:false;"></pre> 标签的适用边界

<pre class="brush:php;toolbar:false;"></pre> 是最原始的保留空白方案，但它自带默认样式（等宽字体、上下外边距），容易破坏现有排版。

• 仅建议用于代码块、ASCII 图、或明确需要等宽字体的场景
• 若只想保留空白又不想改字体，必须重置样式：<pre class="brush:php;toolbar:false;" style="font-family: inherit; margin: 0;"></pre>
• <pre class="brush:php;toolbar:false;"></pre> 内部再嵌套其他标签（如 <span></span>）时，子元素的空白仍受父级影响，不能无脑依赖

真正难处理的不是“怎么多打空格”，而是“什么时候该用  、什么时候该切到 CSS、什么时候该换结构”——比如首行缩进用 text-indent，间距控制用 padding，对齐用 flex 或 grid，空格只是最后兜底的手段。

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