必须用 text-indent: 2em 实现段落首行缩进，因其语义正确、响应式适配且不污染 dom；伪缩进（如空格）会导致复制、读屏、渲染错位等问题。
直接用 text-indent，设成 2em 就行，别敲空格、别用 padding-left。
为什么必须用 text-indent 而不是加两个全角空格
加空格是伪缩进，本质是插入无意义字符：复制粘贴会带进去、屏幕阅读器会读出来、富文本编辑器可能自动删掉、换字体或字号后错位。而 text-indent 是语义正确、浏览器原生支持的排版控制手段，只影响视觉起始位置，不改变 DOM 内容。
常见错误现象： 段落开头有空格 在移动端放大时缩进突然变宽，或在微信 X5 内核里被截断——这都不是样式问题，是语义污染导致的渲染不可控。
text-indent: 2em 为什么比 32px 更靠谱
2em 表示“当前字体大小的两倍”，中文字体下视觉上接近两个汉字宽度，且随系统字号、辅助功能缩放同步变化；32px 是固定像素，在高 DPI 屏幕或用户开启“更大文本”时会僵硬不变，缩进要么太窄（小字下只剩一个字宽），要么太宽（大字下挤占正文空间）。
使用场景差异：
- 响应式页面、适配无障碍需求 → 必选
2em - 印刷级静态页、字体完全锁定（如 PDF 导出前的 HTML 模板）→ 可考虑
32px，但需配套font-family和font-size强制约束 - 避免用
2ch：IE 不支持，且多数中文字体中1ch远小于一个汉字宽度，实际缩进不足
哪些地方加了 text-indent 也无效
不是代码写错了，而是渲染条件没满足。最容易踩的坑集中在三类：
-
<p></p>被设成display: inline或inline-block—— 浏览器根本不识别“首行”概念 - 父容器用了
display: flex或display: grid——<p></p>的块级格式化上下文（BFC）被覆盖，text-indent失效（此时改用padding-left: 2em更直接） - 段落开头是
<img>、<svg></svg>等内联替换元素 —— 缩进计算起点仍在容器左边缘，但视觉上被图片挡住，看起来像没动
快速验证：打开开发者工具 → 查看目标 <p></p> 的 Computed 样式 → 确认 display 是 block，且 text-indent 的最终值不是 0。
首段不缩进怎么安全跳过
导语、标题后第一段通常需要视觉起始感，不该缩进。硬写 p { text-indent: 0 } 全局覆盖容易漏掉或冲突，稳妥做法是主动排除：
-
p:first-of-type { text-indent: 0; }：适合结构固定、首段总在最前的页面（如博客正文） -
p.no-indent { text-indent: 0 !important; }：更灵活，配合 CMS 或 Markdown 渲染时手动加类；!important仅用于对抗富文本编辑器强制写的内联样式，正常层叠中避免使用
慎用 p:nth-of-type(1)：如果 <p></p> 前有 <h2></h2> 或 <div>，它可能选错元素。
<p>真正难的不是写对一行样式，而是判断这个段落是否处在 Flex/Grid 容器里、是否被 direction 或 white-space 干扰、是否被更高权重规则悄悄覆盖——这些边界情况，往往要靠 Computed 样式面板一眼识破。</p>
</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
