HTML中空格被浏览器默认压缩为单个空格，需用或CSS的white-space属性（如pre-wrap）控制；精确占位应优先使用padding、width等盒模型属性而非空格堆叠。

HTML中空格被合并的默认行为

浏览器默认会把连续的空白字符（空格、制表符、换行）压缩成一个空格，所以直接敲多个 或连写空格，视觉上还是只显示一个空格宽度。

 适合单个不可断行空格，但不适合长空白区域

虽然 能强制保留一个不换行的空格，但堆叠多个 既难维护又不可预测——尤其在响应式布局里，它不会随容器缩放，还可能破坏语义结构。

• 不要写     来“模拟4字符宽空白”
•  本质是字符，不是尺寸单位，无法对齐或精确控制宽度
• 屏幕缩放或字体变化时，实际像素宽度会浮动

用white-space CSS控制空白解析方式

真正可控的方式是改CSS的white-space属性，配合普通空格或 （空格字符实体）使用：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<div style="white-space: pre;">    这里四个空格会原样显示</div>
<div style="white-space: pre-wrap;">    换行和空格都保留，且允许折行</div>

• pre：保留所有空白和换行，但内容不自动换行（容易溢出容器）
• pre-wrap：推荐首选——保留空白，同时支持正常折行
• 避免用white-space: nowrap，它只禁换行，不解决空格合并问题

需要像素级控制时，优先用padding或width

如果目标是“在文字右侧留出20px空白”，就别用空格凑，直接用内边距或伪元素：

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

<span style="padding-right: 20px;">文本</span>
<span>文本<span style="display: inline-block; width: 20px;"></span></span>

• 用padding最简洁，不影响文本流和可访问性
• 避免用<div style="width:20px;"></div>插入块级空白，会破坏行内布局
• 如果空白要响应字号（比如2em），用em或ch单位比固定像素更健壮

浏览器对空白的处理逻辑藏得深，但关键就两点：想保留输入源格式，调white-space；想精确占位，用盒模型。硬塞空格或 只是绕路。