html中连续空格被浏览器合并为一个，可用 逐个替换、white-space css属性控制或pre标签保留格式，语义性空格应优先用css布局实现。
HTML里普通空格会被自动合并
浏览器默认把连续多个空格、换行、制表符都当成一个空格处理，这是HTML规范行为，不是bug。所以直接敲十几个空格，页面上只显示一个。
用 实体逐个替换空格
最直接的办法是用 （non-breaking space）代替每个需要保留的空格。比如想显示“a____b”（中间4个空格），写成：a b。
- 适合少量、固定位置的空格，比如表格对齐、缩进标题
- 注意
&或拼错会直接显示为文字 - 不能用在属性值里（如
title="a b"无效，会被解析为空格）
用white-space CSS控制整体空白处理
对一段文本整体生效更高效，比如
<p style="white-space: pre"> hello world</p>会原样显示所有空格和换行。
-
white-space: pre：保留空格和换行，但不自动换行（类似<pre class="brush:php;toolbar:false;"></pre>） -
white-space: pre-wrap：保留空格和换行，且允许自动换行（推荐日常使用） -
white-space: pre-line：合并空格，但保留换行（换行符转
，空格仍被压缩） - 注意：这个属性会影响整块元素，不只是空格——比如段落内换行也会被渲染出来
用<pre class="brush:php;toolbar:false;"></pre>标签包裹纯文本内容
如果整段内容就是代码、日志、ASCII图这类需要严格保留格式的文本，直接套 <pre class="brush:php;toolbar:false;"></pre> 最省事：
<pre class="brush:php;toolbar:false;"> indented line。
-
<pre class="brush:php;toolbar:false;"></pre>默认等宽字体 +white-space: pre - 不适合混排文字（比如段落中插几个空格），因为字体和行高会突兀变化
- 若要保持正常字体，加CSS：
pre { font-family: inherit; }
真正麻烦的不是“怎么输空格”，而是得先想清楚：这些空格是语义性的（比如缩进表达层级），还是纯视觉对齐？前者该用CSS margin/padding，后者才考虑 或white-space——很多人卡住，是因为没区分这两类需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
