最常见原因是段落非块级上下文，如父容器为flex/grid且未显式设display:block，或自身为inline/inline-block；text-indent仅对生成块级框的元素生效，其他干扰包括white-space设置、overflow裁剪、高权重样式覆盖、首行含内联替换元素等。
为什么有些段落加了 text-indent 却没缩进
最常见原因是该段落**不是块级上下文**——比如被包在 display: flex 或 display: grid 的父容器里，且未显式声明 display: block；或者它本身被设为 display: inline、inline-block。浏览器只对生成「块级框」的元素计算首行盒（first line box），text-indent 才会生效。
其他高频干扰项包括：
-
white-space: nowrap或white-space: pre：前者取消换行，“首行”语义失效；后者保留原始空格，可能掩盖缩进效果 - 父容器设置了
overflow: hidden且缩进值超出左边界，内容被裁掉，看起来像没生效 - 全局重置样式中写了
p { text-indent: 0 !important }，直接覆盖了你的设置 - 段落开头是
<img>、<svg></svg>或float元素，导致首行盒起始位置偏移，缩进仍从容器左边缘算，但视觉上“没动”
p:first-of-type 和 .no-indent 怎么精准跳过首段
新闻页、小说页常要求「第一段不缩进」，但用 p:first-of-type 容易误伤——比如标题后紧跟一个 <div class="meta">，那第一个 <code><p></p> 就不是 :first-of-type 了。
更稳的做法是主动标记：
- 给不需要缩进的段落加类：
<p class="no-indent">导语不缩进</p> - CSS 写成：
p { text-indent: 2em; } p.no-indent { text-indent: 0; } - 若用富文本编辑器输出，可能带内联
style，此时需提高权重：p.no-indent[style] { text-indent: 0 !important; } - 避免用
:first-child——它认的是 DOM 顺序，不是语义段落，<h2></h2>后第一个<p></p>可能不是第一个子元素
表格单元格、代码块、图标段落怎么绕过 text-indent 干扰
<td> 里 <code>text-indent 偶尔失灵，不是 bug，是 display: table-cell 的格式化规则特殊：内容太短、未换行时，浏览器可能不触发首行盒。这时别硬调 text-indent，直接用 padding-left: 2em，简单粗暴且 100% 生效。
<pre class="brush:php;toolbar:false;"></pre> 和 <code> 是重灾区——父级 p 的 text-indent 会泄露进来，造成第一行双缩进。必须显式重置：
pre, code { text-indent: 0 !important; }- 如果用了
white-space: pre-wrap，还要确认开头没多敲空格或制表符 - 含图标段落（如
<p><svg></svg>文字</p>）建议把图标挪到文字后面，或改用::before伪元素插入，确保首字符是纯文本
移动端用户缩放时缩进突然变大或消失怎么办
iOS Safari 和部分安卓浏览器在双指放大时，会把 rem 和 em 当作绝对尺寸重算，导致缩进比例失调。这不是 CSS 写错了，是可访问性机制在起作用。
应对策略要分场景：
- 纯阅读类产品（如小说站）：固定根字体
html { font-size: 16px; }，全站用text-indent: 32px，牺牲一点响应性换确定性 - 需要兼顾缩放的管理后台：用
ch单位（text-indent: 2ch），它基于当前字体的 “0” 字宽，缩放时同步变化——但得先查 caniuse，Chrome 120+ 和 Firefox 支持良好，Safari 仍不稳定 - 别用 JS 动态检测缩放再切单位，成本高、触发延迟、容易和字体加载竞争
真正难处理的是嵌套字体大小场景：比如 p > small 里又套了一段 p，em 会继承子元素字号，缩进值就乱了。这种结构下，rem 比 em 更可控，但前提是根字体不能被用户强制修改。
