text-indent仅控制首行缩进,不涉及段前或段后;段前缩进需用margin-left或padding-left,段间距由margin-top/margin-bottom控制,二者不可混淆。

text-indent 只管首行,前后缩进是两回事
HTML里没有“段落前后缩进”这个统一概念。text-indent只作用于首行开头,它不碰段尾,也不动段前垂直距离。所谓“前后”,实际是两个独立控制点:水平方向的首行缩进(text-indent),和垂直方向的段间距(margin-top/margin-bottom)。混用padding-left或margin-left去模拟“段前缩进”,会导致整段左移、破坏对齐、响应式错位——这不是缩进,是偏移。
怎么安全实现“段前缩进”效果
真要让段落整体向右退一点(比如避开侧边栏、适配卡片内边距),必须用margin-left或padding-left,但得清楚代价:
-
margin-left:在段落外侧加空白,不影响内部排版,但可能触发外边距折叠或与父容器padding叠加 -
padding-left:在段落内侧加空白,文本内容整体右移,text-align: justify仍能正常工作 - 两者都会让
text-indent继续生效——即首行在已右移的基础上再缩进一次,容易过量 - 若父容器是
display: flex或grid,margin-left可能被忽略或行为异常,此时优先用padding-left
首行缩进 + 段间距的推荐组合
中文排版常见需求是:首行空两格 + 段间留空 + 首段不缩进。直接用下面这段 CSS 最稳:
p {
text-indent: 2em;
margin: 1.4em 0;
}
p:first-of-type {
text-indent: 0;
margin-top: 0;
}
注意三点:
立即学习“前端免费学习笔记(深入)”;
-
2em比32px更可靠——字号放大时缩进同步变宽,适配系统缩放和夜间模式 -
margin: 1.4em 0用相对单位,上下间距随字体变化,避免小屏挤成一团 -
p:first-of-type重置首段,否则导语或标题下第一段会多出一个“空两格”+“上边距”,视觉上悬空
为什么不用负text-indent做“段后缩进”
text-indent不支持“段尾缩进”。设负值(如text-indent: -1em)只会把首行往左顶,常导致文字溢出容器左侧,甚至被裁剪。真要控制段尾对齐,靠的是text-align(如right或justify),或者用max-width配合margin-left: auto把段落右对齐。想让某几段“右边收一点”,唯一干净做法是包一层<div style="padding-right: 20px"><p>...</p></div>——缩进逻辑必须分层,不能堆在一个属性上。



















