HTML中连续空格被合并为一个且首尾忽略是规范行为，非bug；需保留空格可用 、white-space属性（如pre-wrap）或CSS间距控制。
HTML里直接敲空格不显示？这是浏览器默认行为
HTML解析器会把连续的空白字符（空格、换行、制表符）合并成一个空格，且首尾空白会被忽略。这不是bug，是规范定义的渲染逻辑。所以写
hello world，页面只显示“hello world”中间一个空格。
- 想保留原样空格，必须用
-
- 用 CSS 的
white-space更灵活，比如white-space: pre-wrap可保留换行和空格，同时允许折行
用 堆叠多个空格却导致响应式错乱
新手常写 模拟缩进或对齐，结果在小屏幕下内容溢出、按钮错位。因为 是固定宽度字符，不受字体大小、缩放或 viewport 影响。
- 替代方案：用
margin-left或padding-left控制间距，能随 rem/em 缩放 - 表格对齐别用空格凑，改用
text-align和vertical-align - 若真需等宽空格（如代码对齐），用
包裹，或设font-family: monospace
在内联元素里加空格被自动吞掉
像 左 右 这种写法，两个 之间那个空格会被合并，看起来紧贴着。但换成 左右 就完全没空隙。
- 解决方法一：给父容器设
font-size: 0，再给子元素单独设字体大小（防继承） - 解决方法二：用
display: flex替代内联布局，间隙用gap控制 - 避免用注释
用CSS控制空格时忽略了继承和重置
设了 white-space: pre-line 后，发现子元素里的按钮文字换行异常，是因为该属性会继承，且 等原生控件有 UA 样式干预。
立即学习“前端免费学习笔记（深入）”；
- 务必检查子元素是否需要重置：比如
button { white-space: nowrap; } white-space值中，normal（默认）、nowrap、pre行为差异大：pre不折行也不合并空格，pre-line合并空格但保留换行- 移动端慎用
pre，用户复制文本时会带多余空格和换行
这里有 多个空格和 换行
实际渲染时，多空格变一个，换行保留，末尾空行被忽略。
空格问题表面简单，但牵扯到 HTML 解析、CSS 继承、UA 样式、响应式适配多个层面。最稳妥的起点是：先想清楚“这个空格是语义性的（比如段落缩进），还是视觉性的（比如按钮右侧留白）”，再选对应手段。
