text-indent 是唯一语义正确且浏览器原生支持首行缩进的方式，但需与 text-align 配合使用才能实现“缩进+对齐”效果，且其生效依赖块级盒渲染条件。
text-indent 是唯一语义正确、浏览器原生支持首行缩进的方式，但“缩进”和“对齐”是两个独立行为，不能靠一个属性同时解决。
为什么 text-align: justify 不带首行缩进
两端对齐（justify）只拉伸词间距使行尾对齐，不改变首行起始位置。它和 text-indent 无关，也不会触发缩进。常见错误是以为加了 justify 就自动缩进，结果首行依然顶格。
- 必须显式写
text-indent: 2em才有缩进效果 -
text-align: justify只在多行段落中生效；单行下无视觉变化 - 若
p同时设了text-align: center或right，text-indent虽计算但被整体位移抵消，看起来像没缩进 - 调试技巧：临时加
background: #ff0，看文字是否真向右偏移；若背景框内文字紧贴左边缘，说明text-indent没生效
text-indent 失效的常见原因
不是代码写错，而是渲染条件未满足。浏览器只对标准块级盒计算“首行”，一旦布局上下文被覆盖，缩进就失效。
-
p被设成display: inline或inline-block→ 浏览器不识别“首行”概念 - 父容器用了
display: flex或display: grid→p的块级盒行为被覆盖 - 段落开头是
等内联替换元素 → 缩进发生在该元素左侧，视觉上等于没动 - 某处高权重样式写了
p { text-indent: 0 !important }（富文本编辑器输出常见） -
white-space: nowrap或pre→ 破坏换行，“首行”失去意义
单位选错会导致缩进“看起来不对”
2em 是中文排版黄金值，等于当前字号下两个汉字宽度；32px 是固定像素，在高 DPI 屏幕、系统字体放大（如 Windows 125% 缩放）、或用户开启“大字体模式”时会明显失准。
- 推荐写法：
p { text-indent: 2em; } - 若设计稿强约束必须用像素，至少配套固定字号：
p { font-size: 16px; text-indent: 32px; } - 避免用
padding-left模拟缩进 → 它会让整段左移，破坏对齐基准 - 注意：父容器设了
font-size: 0（常用于清除inline-block间隙）→ 子元素em单位全部归零
对齐与缩进必须配合使用才完整
单独 text-indent 实现缩进，单独 text-align 控制对齐，两者共存才能达成“缩进+对齐”的视觉效果。但要注意它们作用对象不同：text-align 作用于块级元素内部的行内内容，text-indent 只影响首行第一字符前的空白。
-
text-align: justify必须作用在p这类块级元素上，不能只写在父容器里 -
text-align: left是默认值，显式写上更可控，尤其在 CSS Reset 清除了默认margin的情况下 - 段落之间没空隙？检查
margin是否被清零；段内文字挤在一起？那是line-height太小，不是缩进问题 - HTML 规范禁止在
p内嵌套块级元素，浏览器会自动“修复”结构，结果不可控 —— 别指望靠嵌套 div 来绕过缩进限制
最易被忽略的是：缩进单位和对齐方式在响应式场景下的联动失效。比如 2em 在小屏上可能显得过大，而 justify 在窄容器中又容易造成词距崩坏。这时候需要媒体查询微调，而不是硬套一套值到底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
