HTML中连续空格会被压缩为一个，需用 实现多个可见空格；首行缩进应优先使用text-indent（推荐em单位），而非 堆砌； 、 宽度不同，响应式下避免用px而应用em/rem。
HTML 里打空格不能直接敲空格键
HTML 解析器会把连续的空白字符（空格、换行、制表符）压缩成一个空格，所以你在代码里写 或者敲四下空格，浏览器渲染出来通常只显示一个空格。这不是 bug，是 HTML 规范行为。
要真正“打出多个可见空格”，必须用 HTML 实体 （non-breaking space），它不会被压缩，且能强制保留。
常见错误现象：
– 写了 <p> 文字</p>（中文全角空格）→ 渲染可能异常或不一致
– 在 CSS 里没设 white-space: pre; 却指望缩进保留 → 失败
段落首行缩进用 text-indent 最稳妥
别用一堆 拼首行缩进——语义错、维护难、响应式下容易崩。CSS 的 text-indent 是专为这事设计的。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给
<p>设置text-indent: 2em;（推荐用em，适配字体大小） - 如果只想对第一段缩进，用
p:first-of-type { text-indent: 2em; } - 注意：
text-indent不影响换行后的行，只作用于首行；负值可实现悬挂缩进 - 兼容性极好，所有现代浏览器包括 IE8+ 都支持
和 / 的区别
虽然都能“打空格”，但宽度和语义不同，乱用会导致排版错位：
-
-
n字宽（通常为 0.5em） -
M字宽（通常为 1em） - 它们都不受
word-spacing或letter-spacing影响，但会被font-size缩放
示例（在段落开头加两个 em 宽空格）：
<p>  这是首行缩进两字符的段落</p>
响应式下缩进失效？检查是否用了固定像素值
用 text-indent: 32px; 在小屏设备上可能缩得太狠，甚至挤出容器。这不是空格问题，是单位选错了。
更健壮的做法：
- 优先用
em或rem：例如text-indent: 2em; - 配合媒体查询微调：
@media (max-width: 480px) { p { text-indent: 1.5em; } } - 避免在内联样式里硬写像素值，尤其不要写
style="text-indent: 40px;"
另外，如果父容器设置了 font-size: 0;（常见于清除 inline-block 间隙），子元素的 em 缩进会失效——记得重置 font-size。
