直接修改 p 的 margin 和 text-indent 即可解决 90% 段落排版问题:设 margin: 1em 0 恢复天然段间距,text-indent: 2em 保证中文首行缩进语义正确、缩放安全;需修复 CSS Reset 导致的 margin 清零,并避免 line-height 过小或 font-size: 0 等干扰。

直接改 p 的 margin 和 text-indent 就能解决 90% 的段落排版问题,不需要动结构、不依赖 JS、兼容所有浏览器。
为什么只调 p 就够了
浏览器给 p 默认加了约 1em 上下外边距,这是段落天然“呼吸感”的来源;中文首行缩进用 text-indent: 2em 是语义正确、缩放安全的黄金值。这两个属性覆盖了段间距、首行对齐、响应式适配三个核心需求。
常见错误是去动 div 或套多层容器——既增加 DOM 复杂度,又让 CSS 更难维护。
真正需要干预的,只是那几个被重置或覆盖掉默认行为的地方。
p { margin: 1em 0; } 必须显式写
很多项目用了 CSS Reset 或 Normalize,会把 p 的 margin 清成 0,结果段落粘连成一团。
修复很简单:
• 全局写 p { margin: 1em 0; },放在 CSS 开头,确保它被后续规则继承
• 首段顶空去掉:.article p:first-child { margin-top: 0; }
• 末段底空去掉:.article p:last-child { margin-bottom: 0; }
注意:别只设 margin-top,相邻段落外边距会合并,必须同时控制上下值;单位用 em 或 rem,不用 px,否则字体缩放时间距失准
text-indent: 2em 不能用 32px
2em 等于当前字号下两个汉字宽度,是中文排版的稳定基准;32px 是固定像素,在高 DPI 屏、系统缩放(如 Windows 125%)、用户开启大字体模式时,缩进会明显偏小或过大。
唯一例外是设计稿强约束且字体锁定:p { font-size: 16px; text-indent: 32px; },但这种写法不可扩展。
还要注意:text-align: justify 会干扰 text-indent 效果,两者慎合用;别用 padding-left 模拟缩进,它会让整段左移,破坏对齐基准
立即学习“前端免费学习笔记(深入)”;
段落“挤在一起”不是 margin 的问题
如果文字行内看起来太密、看不清,不是段间距小,而是 line-height 太小。
中文建议设为 1.5~1.6,例如:p { line-height: 1.5; }
另外两种情况也常被误判:
• 用了 display: inline-block 包 p 却没设 vertical-align → 行框底部对齐异常,造成视觉“粘连”
• 父容器设了 font-size: 0(常见于清除 inline-block 间隙技巧)→ 子元素的 em 单位全部失效,margin 和 text-indent 全归零



















