html空格不能用于布局，因浏览器会折叠连续空白符；应使用text-indent控制首行缩进，用margin/padding管理块级间距，仅在代码等场景用pre+white-space保留空格。
HTML 中的空格不会直接“优化布局”，它只会被浏览器折叠为单个空格；所谓“优化空格布局”，本质是放弃依赖空白符控制排版，改用语义化标签和 CSS 控制间距与对齐。
为什么 和连续空格不能当布局工具用
HTML 规范规定：所有连续空白字符（\n、\t、多个 ）在渲染时被合并为一个空格。这意味着：
-
<p>Hello<span> </span>World</p>渲染效果 ≈Hello World，不是三格缩进 - 用空格或
- 可访问性工具（如屏幕阅读器）会跳过
替代方案：用 text-indent 实现首行缩进
中文段落习惯首行缩进 2 字符，这不是靠空格，而是用 CSS 的 text-indent：
p {
text-indent: 2em; /* 推荐，相对 font-size 计算 */
/* 或 text-indent: 32px; 如果字号固定 */
}
注意：text-indent 只作用于第一行，且不影响其他行；若想取消某段缩进（如标题后紧跟段落），显式设为 text-indent: 0。
用 margin 和 padding 管理块级间距
段落之间、图片与文字之间、表单控件之间的“空格”，应由 margin（外边距）或 padding（内边距）控制：
-
p { margin-bottom: 1.2em; }—— 比写两个<p></p>更可靠 -
img { margin-right: 1rem; }—— 替代在 HTML 里塞一堆 - 避免混合使用：同一方向不要同时设
margin和padding，易引发意外叠加
特殊情况：需要保留原始空格怎么办
仅在展示代码、日志、ASCII 图等场景才需保留换行与空格，此时应：
- 用
<pre class="brush:php;toolbar:false;"></pre>标签包裹内容，浏览器默认保留空白符 - 配合
<code>提升语义（如<pre class="brush:php;toolbar:false;"><code>...</code></pre>） - 若需响应式缩放，加 CSS：
pre { white-space: pre-wrap; }，允许自动换行但不丢空格
真正难的是把“视觉上想要的空格”准确映射到 CSS 的盒模型逻辑里——很多人卡在这一步，不是不会写 ，而是没意识到它根本不在布局体系中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
