中文段落首行缩进应设为text-indent: 2em，因其随字体大小等比缩放，始终维持两字宽；首段用:first-child清缩进和上边距，末段用:last-child清下边距；flex/grid中改用padding-left模拟缩进；悬挂缩进需text-indent负值配合等值padding-left。
text-indent 该设多少才符合中文排版习惯
中文段落首行缩进两个汉字宽度是通行规范，text-indent: 2em 是最稳妥的选择。它不是凭空定的数值，而是因为 em 单位会随当前字体大小等比缩放：16px 字号下 2em ≈ 32px，正好容纳两个标准中文字；用户放大字体或开启系统缩放时，缩进依然保持“两字宽”，不会变窄或溢出。
不推荐用 32px 或 20px 这类固定像素值——高 DPI 屏幕、浏览器 zoom 到 150% 时，缩进会明显偏小；也别用 2%，它基于父容器宽度，在窄屏（如 320px 宽）下缩进可能只剩 6px，远不够一字符。
-
2em是默认起点，正文段落直接套用即可 - 若用等宽字体（如
Consolas），可试2ch，它按字符实际宽度计算，更精确 - 需要微调时，
1.8em或2.2em比整数更贴合某些字体渲染效果
首段不缩进、末段去底边距怎么写
网页首段常是标题下导语，按出版惯例不该缩进；末段紧接页脚或卡片底部，多出的 margin-bottom 会破坏节奏。这两个问题必须显式重置，不能靠“默认没设就等于没有”来赌。
浏览器给 p 的默认样式是 margin: 1em 0，所以要覆盖它：
- 首段清除缩进和顶边距：
p:first-of-type { text-indent: 0; margin-top: 0; } - 末段只清底边距：
p:last-of-type { margin-bottom: 0; } - 如果段落包在
.article里，优先用.article p:first-child，避免被其他p干扰
Flex/Grid 容器里 text-indent 失效怎么办
在 display: flex 或 display: grid 的父容器中，子 p 默认变成 flex item / grid item，其 text-indent 可能不生效——这不是 bug，是格式化上下文切换导致的语义退化。
硬加 display: block 有时能救，但不可靠；更直接的做法是换思路：用 padding-left 模拟视觉缩进效果，它对任何 display 类型都有效。
- 写成
p { padding-left: 2em; }，视觉上和text-indent几乎一致 - 注意：这会让整段左移，所以若段内有
text-align: justify，需同步检查两端对齐是否被破坏 - 如果只是导航栏或卡片标题里误用了
p标签，别强行缩进——那是间距问题，该用margin-left或gap
悬挂缩进（首行不缩进、其余行缩进）怎么实现
悬挂缩进常见于参考文献、术语解释、带图标列表项。它和 text-indent 的负值有关，但单靠 text-indent: -1em 不够，必须配合 padding-left 防止文字被截断。
典型写法是：
p.hanging {
text-indent: -1em;
padding-left: 1em;
}
这样首行向左突出 1em，其余行因 padding-left 向右退 1em，形成“首行悬出、余行缩进”的效果。关键点在于两个值绝对值相等，方向相反。
- 若缩进量要适配字体，统一用
em，别混用px和em - 遇到行高较大（如
line-height: 2）时，悬挂效果可能被拉长，需额外加margin-top微调垂直对齐 - 别在
table单元格或label内直接套悬挂缩进，语义错位且兼容性差
缩进看着简单，但单位选错、上下文没覆盖、响应式没预留，三处任一出问题，排版就会在某个设备或字号下突然崩掉。最保险的做法是：所有缩进用 em，所有首/末段用 :first-child/:last-child 显式控制，所有 Flex/Grid 场景先问一句“这里真需要段落语义吗”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
