html中空格被折叠是浏览器默认行为，需用 、white-space属性、标签或letter-spacing等语义化方式实现可控空白。
直接输入空格键无效，是HTML解析机制决定的，不是你写错了——浏览器默认会把连续空白字符（空格、制表符、换行）折叠成单个空格。要让多个空格或特定间距生效，必须用明确的语义化手段替代“敲空格”这个直觉操作。
用 插入不可折叠的内联空格
这是最常用也最容易误用的方式。 是 non-breaking space，每个都算一个独立字符，不会被合并，也不会在行尾断开。
- 适合场景：单词间微调（如 “10
- 不要连写十个
- 注意：在属性值里写
title="hello world"中的 - 替代宽度选项：
用 white-space 控制整块文本的空白行为
当你要保留一段文本里的原始空格和换行（比如日志、诗歌、命令行输出），white-space 比一堆 更干净、更语义正确。
-
white-space: pre;—— 完全保留所有空白，包括换行，但默认用等宽字体；需加font-family覆盖才匹配正文样式 -
white-space: pre-wrap;—— 推荐首选：保留空格和换行，同时允许长行自动折行，适合用户提交的富文本预览 -
white-space: pre-line;—— 合并连续空格，但保留换行符，适合清洗过又想留段落结构的内容 - 不能只给单个词加该样式——它作用于整个元素，内部所有文本统一处理
用 <pre class="brush:php;toolbar:false;"></pre> 标签包裹需要原样呈现的内容
<pre class="brush:php;toolbar:false;"></pre> 是语义最明确的方案：告诉浏览器“这段内容的格式就是它的意义”。它本质是 white-space: pre; 的 HTML 封装，但自带默认样式。
- 适合场景：代码块、CLI 输出、ASCII 图、带缩进的配置示例
- 缺点：默认使用
font-family: monospace，若不重置会突兀；且无法对其中某几个词单独加粗或变色（需嵌套<span></span>） - 安全写法：
<pre class="brush:php;toolbar:false;"><code>...</code></pre>，既保留格式，又表明内容类型，利于可访问性和 SEO - 别把它当“万能空格工具”滥用——比如用
<pre class="brush:php;toolbar:false;"></pre>给标题加两个空格，属于语义错配
用 letter-spacing 或 word-spacing 做视觉微调
这两个 CSS 属性不插入真实空格字符，而是调整渲染时的间距。它们不改变 DOM 文本内容，因此不影响复制、搜索、屏幕阅读器朗读。
-
letter-spacing对中文、英文、符号都有效，设2px可让标题更舒展，设-0.5px可收紧紧凑排版；但负值过大易导致文字粘连 -
word-spacing主要影响以空格分隔的“单词”，对中文基本无效（中文没有 word boundary），别指望靠它拉开两个汉字 - 慎用于长段落——全局增大
letter-spacing会降低可读性；更适合按钮文字、短标签、图标旁文字等局部场景 - 响应式注意：用
em单位比px更稳妥，避免字号缩放后间距失衡
真正难的不是选哪种方法，而是判断“这里到底需不需要空格”：是结构需求（如缩进段落）、语义需求（如防止数字与单位断行）、还是纯视觉装饰（如标题留白）？选错方案会导致后续维护成本陡增，比如用十个 实现的“居中”，换字体后就偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
