HTML 里怎么插入一个可见的空格
普通空格键打出来的空格，浏览器会自动合并——连续多个空格只显示一个，首尾空格直接丢掉。真要“看到空格”，得用 HTML 实体或 CSS 控制。
-
- 别用
- 用
white-space: pre;或pre-wrap这类 CSS 也能保留空格，但会影响整块文本的换行行为，适合小范围包裹，别随便加在p或div上
为什么 有时候没反应
常见原因是：空格被其他样式覆盖，或者它孤零零夹在两个标签之间，被浏览器解析时“吞掉”了。
- 检查是否被父容器的
white-space: nowrap;或text-indent干扰 - 如果写成
<span> </span>，确保这个span没有设display: inline-block;且高度为 0 —— 否则 - 避免连写多个
margin或padding
JS 动态插入空格要小心什么
用 JavaScript 往 DOM 插入文本时，" " 会被当成普通空格处理，照样被合并。必须显式插入实体字符串或 Unicode 字符。
- 用
innerHTML时，写element.innerHTML = "a b";才有效；写"a b"没用 - 用
textContent时，\u00A0（即"a\u00A0b"） - React/Vue 等框架里，直接写
{"\u00A0"}或{"\u00A0"}，模板语法中可直接写
替代方案：什么时候不该用
是 hack，不是布局工具。它解决的是“字符级空格语义”，不是“视觉间距需求”。
立即学习“前端免费学习笔记（深入）”；
- 按钮文字前加图标留空？用
padding-left更合理 - 两段文字中间留空？用
margin-right+margin-left，而不是塞一堆 - 表格单元格对齐？用
text-align或flex，别靠空格撑 - SEO 和可访问性角度：
用得越少，代码越干净。真正绕不开的，往往就那几种：金额数字间防断行（¥ 1,000）、缩写点后强制不换行（Mr. Smith）、表单提示文案里的占位空格——其它情况，先想 CSS。 
