text-indent不改变盒模型尺寸，仅偏移块级元素首行文字位置；它基于行内排版机制，不影响width、padding等外部尺寸，也不触发重排，负值可导致首行溢出，且仅对块级元素生效。
text-indent 不改变盒模型尺寸，只移动首行内容位置
text-indent 是一个纯排版偏移属性，它不增加、不减少元素的 width、padding、border 或 margin，也不触发重排（reflow）以外部尺寸变化为前提的布局计算。它的作用机制是：在块级容器的第一行行盒（line box）生成时，将该行盒的起始位置向内联方向平移指定距离，后续行不受影响。
常见误解是看到“缩进后文字离左边变远了”，就以为 padding-left 被动生效了——其实不是。你可以用浏览器开发者工具选中段落元素，观察 computed 样式里的 width 和 border-box 尺寸，会发现它们和没设 text-indent 时完全一致。
需要注意的细节：
-
text-indent的负值会导致首行内容溢出容器左侧（如text-indent: -1em），此时是否显示取决于父容器的overflow设置 - 它仅对块级容器生效（
p、div、li等），span、em这类内联元素即使设了也无效 - 因为可继承，子级
inline-block元素若未显式重置text-indent: 0，也可能被意外缩进
text-indent 与 padding/margin 混用时的视觉冲突
当同时设置 text-indent 和 padding-left（或 margin-inline-start），首行文本实际左边缘 = 容器左边界 + padding-left + text-indent。这容易造成“缩进过深”，尤其在响应式场景下，小屏幕里两个值叠加可能把首字挤到视口外。
典型错误场景：
- 给
p设了padding: 1em又加，结果首行缩进看起来像 3em
- 用
margin-inline-start 控制段落整体左偏移，再叠text-indent，误以为是“段首缩进”，实则是整块位移 + 首行再偏移 - 在 flex 容器中给子
p设margin-inline-start模拟缩进，但父容器justify-content: center下，这种做法会破坏居中逻辑
建议做法：首行缩进只用 text-indent；容器内边距统一用 padding；容器间间距统一用 margin。三者职责分明，避免叠加干扰。
text-indent 在 RTL（右至左）语言下的行为
text-indent 是逻辑方向安全的：在 LTR（如中文、英文）下向右缩进，在 RTL（如阿拉伯语、希伯来语）下自动向左缩进。它依据的是元素的 direction 和 writing-mode，不是固定 left/right。
这意味着你不需要写两套样式，text-indent: 2em 在 direction: rtl 的 div 中，效果等同于 text-indent: -2em 在 LTR 下的表现——都是让第一行内容从逻辑“起始侧”缩进两个字符宽度。
但要注意：
- 如果手动覆盖了
direction或writing-mode，而没同步检查text-indent效果，可能发现缩进方向“反了” - 某些旧版 Safari（writing-mode: vertical-rl 下的
text-indent支持不稳定，首行可能不缩进或缩进错位 - 不要用
margin-inline-start替代text-indent来“适配 RTL”，那只是碰巧方向一致，语义和层级完全不同
首行缩进失效的几个真实原因
遇到 text-indent 不生效，90% 不是属性写错了，而是上下文条件不满足。最常被忽略的几点：
- 目标元素不是块级容器：比如给
span或a直接设text-indent，必须先加display: block或inline-block - 父容器设置了
white-space: nowrap，导致文本无法换行，“首行”概念失效 - 元素内容为空，或首字符是
<br>
等不可见节点，text-indent仍会作用，但视觉上看不出 - CSS 优先级被更高权重规则覆盖，例如某处写了
p { text-indent: 0 !important }，且作用域包含当前段落 - 使用了
contain: layout或content-visibility: auto的容器，部分浏览器（尤其是旧版 Chrome）会对text-indent渲染做优化裁剪
调试时，直接在 DevTools 里临时禁用父级的 white-space、检查 computed display 值、确认是否有空格/换行符干扰，比反复改 text-indent 数值更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
