HTML中普通空格不显示，因浏览器默认压缩空白符；应使用 、CSS white-space属性或flex gap等现代方案控制间距。

HTML 里普通空格不显示？用   或 white-space

HTML 默认会把连续多个空格、换行、制表符压缩成一个空格，所以直接敲空格键在页面上看不到效果。想在进度条旁（比如 <progress> 后）加固定宽度空格，不能靠空格键，得用可渲染的空白字符或 CSS 控制。

•   是最常用方案：它代表“不换行空格”，浏览器一定会渲染为一个空格宽度，且不会被合并
• 如果需要多个空格，写多个     即可，但别滥用——语义上它本意是“此处不应断行”，不是“排版工具”
• 更干净的方式是用 CSS：white-space: pre; 或 white-space: pre-wrap; 让父容器保留原始空格，但要注意影响文本换行行为

进度条后加文字和空格的推荐写法

比如你想写“加载中： 70%”，注意   要放在 </progress> 和文字之间，而不是 HTML 标签内部。

<label>加载中：</label>
<progress value="70" max="100"></progress> 70%

如果用 Flex 布局控制间距，更可控：

<div style="display: flex; align-items: center; gap: 8px;">
  <span>加载中：</span>
  <progress value="70" max="100"></progress>
  <span>70%</span>
</div>

为什么不用   或  ？

这些是全角空格实体（  ≈ 半个汉字宽，  ≈ 一个汉字宽），但它们在不同字体/系统下宽度不一致，且语义模糊。对齐需求建议用 gap、margin 或固定   数量，而不是依赖这些不可控的空格符号。

html-deploy

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

下载

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

•   宽度由当前字体的空格字形决定，通常稳定
•   和   在等宽字体和比例字体下表现差异大，移动端尤其容易错位
• 若真要像素级控制，CSS 的 margin-left: 4px; 比任何空格实体都可靠

【添加】按钮旁空格处理的常见错误

很多人写 <button>【添加】</button> 后手动加空格，结果空格不显示；或者复制了带全角空格的文本，导致样式异常。记住：

• 按钮内文本前后不要依赖空格留白——用 padding 控制内边距
• 按钮外与其他元素的间距，优先用 margin，而不是在 HTML 里塞  
• 如果必须用空格分隔图标和文字（如 <i class="icon-plus"></i> 【添加】），确保   写在标签之间，且只用一个

真正难的不是加空格，而是判断该用空格、CSS 还是布局模型来实现这个“间隙”。多数时候，  只是临时解法，gap 或 margin 才是现代方案。