如何设置文本首行缩进_TEXT-INDENT属性实现书写规范-html教程-PHP中文网

text-indent仅对块级元素生效，内联元素需设display:block；推荐用2em实现响应式首行缩进，避免px硬编码；调试时需排查white-space、direction及overflow冲突。

如何设置文本首行缩进_text-indent属性实现书写规范

text-indent 只作用于块级元素，内联元素加了也没用

直接给或设置 text-indent 不会生效，因为该属性只对生成块级框的元素起作用。浏览器默认把

、

、~

 这类元素当作块级容器处理，首行缩进才可能被渲染。常见误操作是给段落里的某个词单独加 text-indent，结果发现没反应——不是写错了，是元素类型不匹配。
若需对某段文字局部缩进，可包裹一层  或设 display: block
表格单元格（）默认是块级上下文，text-indent 可用，但要注意 text-align 可能覆盖效果
Flex 容器子项即使设了 display: block，text-indent 仍可能被主轴对齐干扰，建议优先用 padding-left 替代

用 em 还是 rem？中文排版建议用 em
中文出版物习惯以“两个汉字宽度”为标准首行缩进，而一个汉字在多数中文字体中约等于 1em（相对于当前字体大小）。用 text-indent: 2em 比 20px 更可靠：字体放大时缩进同步变大，适配响应式场景。
rem 虽然也相对，但它基于根元素字体大小，容易在嵌套多层或动态改 html 字号时失准；em 是就近继承，更贴合段落自身字号语义。

避免写死 text-indent: 32px —— 用户调整系统字号或开启“更大文本”辅助功能时，缩进会僵硬不变
若需精确控制（如匹配印刷规范），可用 ch 单位：text-indent: 2ch 表示两个“0”字符宽度，对等宽字体更稳
注意：某些旧版 Safari 对 ch 支持不全，生产环境建议降级为 em


遇到 text-indent 失效？先检查 white-space 和 direction
这两个 CSS 属性常和 text-indent 冲突。比如设了 white-space: nowrap，整段文字被压成一行，首行缩进就“没地方发挥”；又或者 direction: rtl（从右向左）时，text-indent 实际缩进的是逻辑首行，视觉上可能出现在右侧。
更隐蔽的问题是父容器设置了 overflow: hidden 且内容未换行，缩进部分被直接裁掉，看上去像没生效。

调试时临时加 outline: 1px solid red 到目标元素，确认缩进区域是否被隐藏或挤压
若用 CSS 预处理器（如 Sass），注意不要在嵌套规则里意外覆盖了 white-space

RTL 场景下需配合 text-align: start 或显式使用 text-indent: -2em 反向调整

兼容性没问题，但要注意 line-height 和 font-size 变化带来的视觉误差
text-indent 本身 IE8+ 全支持，真正影响观感的是它和行高、字体大小的协同关系。比如 font-size: 14px + line-height: 1.6 下，缩进 2em 看起来比 font-size: 16px + line-height: 1.4 更“松散”，实际像素值一样，但人眼感知不同。
尤其在移动端小屏上，过大的 text-indent（如 3em）会让首行缩进显得突兀，破坏段落呼吸感。

正文推荐范围：1.5em ~ 2em；标题或引文可放宽至 2.5em，但不宜再大
如果用了 variable font，text-indent 不会随字重/字宽轴变化，缩进量固定，需手动测试不同轴值下的视觉平衡
打印样式表（@media print）中，建议统一用 text-indent: 2em 并禁用 text-align: justify，避免两端对齐拉伸导致缩进错位

缩进不是越明显越好，关键在建立视觉节奏。很多人调完 text-indent 就收工，却忘了检查相邻段落间距（margin-bottom）是否与之协调——缩进太深而段距太小，反而让文本块黏连在一起。