HTML中空格被合并是规范行为，应使用CSS的white-space属性控制空白显示，而非依赖 等实体或空格字符。

HTML 里敲空格键没用，是因为浏览器会合并连续空白符

HTML 解析器默认把多个空格、换行、制表符都当成一个普通空格处理。你源码里写 hello<space><space><space>world，预览出来还是 hello world —— 这不是 bug，是规范行为（HTML spec 的「white space collapsing」规则）。

• 纯靠键盘空格键打出来的空格，在 HTML 文本中几乎“不可见”
•   是非断行空格（non-breaking space），它不会被合并，也不会换行，适合单个强制空格
• 连续多个   可以模拟多个空格，但语义上不推荐堆砌（比如    ）
• 真正需要控制空白布局时，应该用 CSS，而不是硬塞字符

用 white-space CSS 属性保留源码空格格式

这是最干净的解法：让容器尊重源码里的换行和空格，而不是靠字符 hack。

<div style="white-space: pre;">
  hello    world
  line2
</div>

常用值说明：

• pre：完全保留空格和换行，表现像 <pre> 标签
• pre-wrap：保留空格和换行，但允许自动换行（更实用）
• pre-line：合并空格，但保留换行（换行符生效，空格仍被压缩）
• normal（默认）：所有空白符合并为单个空格，换行符忽略

  和  /  的区别与误用场景

很多人以为   能当“缩进”或“对齐”用，结果发现宽度不一致、响应式下错位——因为这些实体是字体相关的，不是固定像素。

html-deploy

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

下载

立即学习“前端免费学习笔记（深入）”；

•  ：一个标准字符宽，但受当前字体、字号、font-weight 影响
•  ：约等于两个   宽（en 空格，≈0.5em）
•  ：约等于四个   宽（em 空格，≈1em）
• 它们都不能替代 CSS 的 padding、margin 或 text-indent
• 在等宽字体环境（如代码块）里用   比较可控；其他场景尽量避免

表格/对齐需求别用空格凑，改用语义化结构

看到有人为了“对齐文字”在 HTML 里疯狂加   或  ，这会导致可访问性差、维护困难、缩放失真。

• 左对齐/右对齐/居中：用 text-align
• 首行缩进：用 text-indent
• 列对齐：用 <table> 或 CSS Grid / Flex 布局
• 代码或日志类文本：用 <pre><code> + white-space: pre-wrap

空格问题的本质，是混淆了「内容排版」和「视觉呈现」。HTML 负责结构，CSS 负责表现——强行用字符模拟样式，迟早会在不同设备或字体下露出破绽。