html中有效空格需用 （非断行空格）或white-space css属性；连续 可实现多空格，中文排版可用 、 ；段首缩进用text-indent，段落间距用多个标签；代码等需保留格式时用white-space:pre-wrap。
HTML 中的空格符号怎么打才有效
HTML 默认会把连续的空白字符（空格、换行、制表符）压缩成一个空格，且忽略首尾空白。所以直接敲空格键、回车或 的效果完全不同。
常见误操作是写一堆空格想“对齐”或“留白”，结果页面完全没反应——不是 HTML 不认，而是浏览器渲染时被合并了。
-
- 连续多个
- 用
- 避免用
折叠面板（details）里内容空格消失怎么办
在 <details><summary>...</summary><p>内容</p></details> 中，如果 <p></p> 里开头或结尾有空格，或者段落间靠空行分隔，这些空格基本都会被忽略——因为 <p></p> 自身有默认上下 margin，但内部空白仍受 HTML 压缩规则约束。
立即学习“前端免费学习笔记（深入）”；
- 若需段首缩进两个汉字：用
text-indent: 2emCSS，别靠敲空格 - 若需段落间“空一行”效果：用两个
<p></p>标签，而不是在中间敲回车 - 若内容来自后端或富文本，注意预处理时是否 strip 了
- 调试技巧：右键 → “检查元素”，看 Elements 面板里实际 HTML 是否还保留着你写的
white-space CSS 属性能救急但要慎用
当必须保留原始空格、换行、缩进（比如展示代码片段、日志、诗歌），可以给容器加 white-space 样式。但它会影响布局流，尤其在响应式中容易撑破容器。
-
white-space: pre—— 保留空格和换行，但不自动换行（可能溢出） -
white-space: pre-wrap—— 推荐：保留空格和换行，且允许自动换行 -
white-space: pre-line—— 合并连续空格，但保留换行（适合纯文本段落） - 不要全局设置
body { white-space: pre-wrap }，只作用于具体需要的容器，例如：<div class="log-output" style="white-space: pre-wrap; font-family: monospace;"> INFO: user login [2024-06-15]</div>
Vue/React 等框架里空格更易“消失”
JSX 和模板语法会进一步过滤空白——比如 Vue 模板中 <summary> {{ title }} </summary> 两端的空格会被编译器忽略；React JSX 中相邻 JSX 元素间的换行+空格也会被删掉。
- Vue 中想保留空格，用
v-pre或显式写<summary>{{ title }} </summary> - React 中可用
{' '}插入空格，或用 - SSR 场景下，服务端渲染出的空格可能被客户端 hydration 覆盖，建议统一用 CSS 控制间距
- 最稳妥的方式：把视觉间距交给
margin/padding，语义空格才用
