17370845950

HTML中连续空格会被压缩为一个，需用 实现多个可见空格；首行缩进应优先使用text-indent（推荐em单位），而非 堆砌； 、 宽度不同，响应式下避免用px而应用em/rem。

HTML 里打空格不能直接敲空格键

HTML 解析器会把连续的空白字符（空格、换行、制表符）压缩成一个空格，所以你在代码里写      或者敲四下空格，浏览器渲染出来通常只显示一个空格。这不是 bug，是 HTML 规范行为。

要真正“打出多个可见空格”，必须用 HTML 实体  （non-breaking space），它不会被压缩，且能强制保留。

常见错误现象：
– 写了

　　文字

（中文全角空格）→ 渲染可能异常或不一致
– 在 CSS 里没设 white-space: pre; 却指望缩进保留 → 失败

段落首行缩进用 text-indent 最稳妥

别用一堆   拼首行缩进——语义错、维护难、响应式下容易崩。CSS 的 text-indent 是专为这事设计的。

实操建议：

• 给
  设置 text-indent: 2em;（推荐用 em，适配字体大小）
• 如果只想对第一段缩进，用 p:first-of-type { text-indent: 2em; }
• 注意：text-indent 不影响换行后的行，只作用于首行；负值可实现悬挂缩进
• 兼容性极好，所有现代浏览器包括 IE8+ 都支持

  和  /  的区别

虽然都能“打空格”，但宽度和语义不同，乱用会导致排版错位：

•  ：固定宽度，约等于一个英文字符宽（0.5em 左右），最常用
•  ：en space，约等于当前字体

  

  的 n 字宽（通常为 0.5em）
•  ：em space，约等于当前字体的 M 字宽（通常为 1em）
• 它们都不受 word-spacing 或 letter-spacing 影响，但会被 font-size 缩放

示例（在段落开头加两个 em 宽空格）：

  这是首行缩进两字符的段落

响应式下缩进失效？检查是否用了固定像素值

用 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。