能解决大部分“想多打几个空格却只显示一个”的问题，但不是万能解法；真正可控、可维护的方案得看场景选 、css white-space 或语义化布局。
能解决大部分“想多打几个空格却只显示一个”的问题，但不是万能解法；真正可控、可维护的方案得看场景选 <pre class="brush:php;toolbar:false;"></pre>、CSS white-space 或语义化布局。
用 插入不可合并的空格
浏览器默认会把连续空格、制表符、换行都压成一个空格， 是唯一能在普通文本流里“硬塞”空格的方式。
- 每个
- 适合微调对齐，比如“姓名：
- 不能用于属性值内部，例如
<div class="box active"> 会出错，class 值里的 <code>不被识别为分隔符 - 宽度固定（约等于一个英文字符），无法缩放；需要更宽空格时得换
- 默认用等宽字体（如
monospace），若要匹配正文样式，必须加 CSS：<pre class="brush:php;toolbar:false;" style="font-family: inherit;"></pre> - 适合展示代码块、诗歌、ASCII 图、带缩进的日志片段
- 不要用它来“假装做布局”——比如为了在段落里空两行而写
<pre class="brush:php;toolbar:false;">\n\n</pre>，这违反语义，且响应式下容易溢出 - 里面嵌
<pre class="brush:php;toolbar:false;"></pre>本身已接管空白控制 -
white-space: pre—— 行为同<pre class="brush:php;toolbar:false;"></pre>，但不带默认等宽字体，兼容性好（IE8+） -
white-space: pre-wrap—— 最常用：保留空格和换行，同时允许长单词折行，适合用户提交的富文本预览 -
white-space: pre-line—— 合并空格，但保留换行符，适合把 Markdown 段落转 HTML 后保持段落结构 - 注意：设置后会影响子元素继承，如有内联链接或强调文字，可能需对子元素重置
white-space: normal - 空行效果一律走
margin-bottom或padding，语义清晰、响应式友好、调试方便 -
letter-spacing和word-spacing是调整字距/词距的，不是“插空格”的替代品；设大了会破坏可读性，尤其对中文字 - 所有靠空格实现的视觉对齐，在字号缩放、多语言切换、屏幕阅读器下大概率失效
用 <pre class="brush:php;toolbar:false;"></pre> 保留原始空白格式
<pre class="brush:php;toolbar:false;"></pre> 是最直白的“照写照显”方案，所有空格、缩进、换行全数保留，连 Tab 都算数。
用 CSS white-space 精细控制空白行为
比起标签，white-space 是更现代、更灵活的控制方式，尤其适合动态内容或组件化开发。
别用空格“模拟布局”，该用 margin/padding 就用
看到有人写 来顶开按钮、撑开间距，或者用 <pre class="brush:php;toolbar:false;"></pre> 包一段纯文字只为空两行——这些全是信号：你本该用 CSS 间距。
真正难的不是“怎么让空格显示出来”，而是判断这个空格到底属于内容、格式还是布局——选错层级，后面改起来就全是补丁。
