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 或固定 数量，而不是依赖这些不可控的空格符号。
立即学习“前端免费学习笔记（深入）”；
-
-
- 若真要像素级控制，CSS 的
margin-left: 4px;比任何空格实体都可靠
【添加】按钮旁空格处理的常见错误
很多人写 <button>【添加】</button> 后手动加空格，结果空格不显示；或者复制了带全角空格的文本，导致样式异常。记住：
- 按钮内文本前后不要依赖空格留白——用
padding控制内边距 - 按钮外与其他元素的间距，优先用
margin，而不是在 HTML 里塞 - 如果必须用空格分隔图标和文字（如
<i class="icon-plus"></i> 【添加】），确保
真正难的不是加空格，而是判断该用空格、CSS 还是布局模型来实现这个“间隙”。多数时候， 只是临时解法，gap 或 margin 才是现代方案。
