html中应优先用css（margin、padding、gap）实现视觉留白，仅当空格属内容本身（如“100 px”）时才用 实体；全角空格和普通空格不可靠，响应式异常实为字体、换行或布局容器所致。
HTML 里怎么输入空格才不会被浏览器吃掉
HTML 默认会把连续的空白字符（空格、换行、制表符）合并成一个空格，且首尾空格会被忽略。所以直接敲空格键，页面上大概率看不到效果。
常见错误现象： 没用、 （全角空格）乱码、CSS white-space: pre 影响布局、响应式下空格突然“消失”或“撑开”。
-
- 全角空格
- 避免用多个普通空格拼凑，比如
- 如果只是为排版留白，优先考虑 CSS：用
margin、padding或gap，而非语义无关的空格字符
响应式布局中空格“显示异常”的真实原因
空格本身没有响应式行为，所谓“异常”其实是它暴露了其他问题：
- 文本自动换行（
word-wrap: break-word或overflow-wrap）导致空格被挤到行尾，视觉上像“没了” - 父容器设置了
white-space: nowrap，空格还在，但整段文本不换行，溢出容器被裁剪 - 字体加载失败或 fallback 字体不支持空格渲染（尤其某些 WebFont 中
- Flex/Grid 容器内，空格作为文本节点参与布局，在缩放或断点变化时被压缩或拉伸，显得“不稳定”
什么时候该用 ，什么时候该用 CSS
原则：空格是内容的一部分才用 ；仅用于视觉留白就用 CSS。
立即学习“前端免费学习笔记（深入）”；
- 必须用
100 px）、人名/机构名中的固定分隔（如John Doe）、防止换行的关键词组合（如Fig. 1） - 应该用 CSS 的场景：按钮文字左右留白、段落首行缩进、卡片间间距、响应式网格间隙——全部交给
padding、gap、text-indent - 慎用
font-family中混入含空格处理差异的字体（如某些中文 WebFont 对
<p>推荐写法：</p>
<p>宽度：<span class="value">120</span><span class="unit"> px</span></p>
<style>
.value { margin-right: 0.25em; } /* 更可控、可响应 */
.unit { font-size: 0.9em; }
@media (max-width: 768px) {
.value { margin-right: 0.15em; }
}
</style>空格不是布局工具，它是内容符号。把它当样式用，早晚会在某个 viewport 下露出马脚。
