直接修改p的margin和text-indent可解决90%段落排版问题：统一设p{margin:1em 0;text-indent:2em}，首末段用:first-child/:last-child去空，避免嵌套块级元素。

直接改 p 的 margin 和 text-indent 就能解决 90% 的段落排版问题，不需要动结构、不依赖 JS、兼容所有浏览器。

怎么快速统一段落上下间距

浏览器给 p 默认加了约 1em 上下外边距，但不同 UA 样式可能有微小差异，导致段距忽大忽小。最稳的做法是显式重置：

• 全局统一：p { margin: 1em 0; } —— 推荐写在 CSS 开头，覆盖所有默认行为
• 首段顶空去掉：.article p:first-child { margin-top: 0; }
• 末段底空去掉：.article p:last-child { margin-bottom: 0; }
• 别只设 margin-top：相邻段落会叠加出双倍空白，必须同时控制 margin-top 和 margin-bottom
• 用 em 或 rem，不用 px：比如 margin: 1.2rem 0，字体缩放时间距自动适配

中文首行缩进为什么不能用 32px

text-indent: 2em 是中文排版的黄金值，它等于当前字号下两个汉字的宽度；而 32px 是固定像素，在高 DPI 屏幕、系统字体放大（如 Windows 125% 缩放）、或用户开启“大字体模式”时，缩进会明显失准。

• 正确写法：p { text-indent: 2em; }
• 如果必须用像素（比如设计稿强约束），至少配套写 font-size：p { font-size: 16px; text-indent: 32px; }
• text-indent 只影响首行，安全；别用 padding-left 模拟，它会让整段左移，破坏对齐基准
• 注意：text-align: justify 会干扰 text-indent 效果，两者慎合用

为什么段落粘连或挤成一团

常见现象是两段文字紧贴着没空隙，或段内文字行距过小看不清——这两者根本不是同一个问题，但新手常混为一谈。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 段落之间没空隙 → 检查 margin 是否被清零或覆盖（比如 CSS Reset 里写了 p { margin: 0; }）
• 段内文字挤在一起 → 是 line-height 太小，不是 margin 的事；中文建议设为 1.5～1.6，例如：p { line-height: 1.5; }
• 用了 display: inline-block 包 p 却没设 vertical-align → 行框底部对齐异常，造成视觉“粘连”
• 父容器设了 font-size: 0（常见于清除 inline-block 间隙技巧）→ 子元素 em 单位失效，margin 和 text-indent 全部归零

哪些地方绝对不能往 p 里面塞

HTML 规范禁止在 p 内嵌套块级元素，浏览器会自动“修复”结构，结果不可控。

• 禁止：<p><div>xxx</div></p> → 实际解析为 <p></p><div>xxx</div><p></p>，多出空段落
• 禁止：<p><p>嵌套段落</p></p> → 同样被截断，语义全毁
• 允许的只有行内容器：<strong>、<em>、<a>、<code>、<span>
• 要包多段？用 <div class="section"> 或语义化标签如 <article>、<section> 套住一组 p
• 地址、作者、版权信息这类非自然段落，该用 <address> 或 <footer>，别硬塞进 p

真正难调的从来不是单个 p，而是当 p 出现在 flex 容器、grid 项、或被 transform 干扰后，margin 塌陷或失效——这时候得切到盒模型视角，而不是继续调 text-indent。