text-indent 无浏览器默认值,段落缩进必为显式设置;失效原因包括 display 非 block、flex/grid 父容器、首字符为替换元素、!important 覆盖或 white-space 禁用换行;重置需直接作用于目标元素,推荐用 2em 单位。

text-indent 没有浏览器默认值,段落(p)本身根本不缩进——你看到的“默认缩进”一定是项目里某处 CSS 主动加的,比如 reset 库、富文本输出或框架样式。
为什么改了 text-indent 却没反应
不是代码写错了,而是浏览器压根没按你预期生成首行盒:
-
p被设成display: inline或inline-block——text-indent只对display: block生效 - 父容器用了
display: flex或display: grid,子p的块级行为被覆盖 - 段落开头是
<img>、<svg>这类内联替换元素,缩进发生在它左边,视觉上等于没动 - 某处写了
p { text-indent: 0 !important }(富文本编辑器导出常见) -
white-space: nowrap或white-space: pre禁用了换行,“首行”概念失效
最快验证方式:打开开发者工具 → 找到目标 p → 切到 Computed 标签页 → 看 display 是不是 block,且 text-indent 最终计算值不是 0px。
怎么真正“重置”缩进
所谓重置,就是把被第三方样式污染的非零值显式拉回 0:
立即学习“前端免费学习笔记(深入)”;
- 单个段落:加内联样式
style="text-indent: 0" - 批量清除:写
p { text-indent: 0 !important }(仅当被高权重规则覆盖时才需!important) - 按需控制:定义
.no-indent { text-indent: 0; },在特定p上添加该类 - 整页禁用(慎用):
* { text-indent: 0; }—— 会同时干掉blockquote等本该缩进的元素
注意:text-indent 不继承,父元素设了 0 不会自动清掉子元素已设的非零值;必须作用于目标元素本身。
text-indent 单位选错等于白调
单位决定缩进是否随字体/缩放自适应,选错就失准:
- 用
2em:最稳妥。1em = 当前font-size,缩进始终≈两个汉字宽,系统放大、DPI 变化时仍自然 - 用
2ch:语义更准(1ch ≈ 字符 “0” 宽度),但 IE 不支持,且多数中文字体里 1ch 远小于一个汉字 - 避免
32px或20px:固定像素,在高 DPI 屏或用户 zoom 到 150% 时,缩进会明显变窄 - 别用
2%:按父容器宽度算,窄屏下可能只剩几像素,完全不够两格 - 慎用
2rem:若项目用 JS 动态改html { font-size }(比如夜间模式),缩进会意外跳变
真正难的不是写 2em,而是确认它在目标元素上是否真的被计算为非零值——盯住 Computed 面板里的实际数值,比猜“是不是默认值”快十倍。



















