直接改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，字体缩放时自动适配
中文首行缩进为什么不能写成 text-indent: 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效果，两者慎合用
段落粘连或挤成一团，到底该调哪个属性
常见现象是两段文字紧贴着没空隙，或段内文字行距过小看不清——这两者根本不是同一个问题，但新手常混为一谈。
- 段落之间没空隙 → 检查
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全部归零
哪些 HTML 结构会悄悄破坏段落排版
HTML 规范禁止在 p 内嵌套块级元素，浏览器会自动“修复”结构，结果不可控。
- 禁止：
<p></p> <div>xxx</div>→ 实际解析为<p></p> <div>xxx</div> <p></p>，多出空段落 - 禁止：
<p></p> <p>嵌套段落</p>→ 同样被截断，语义全毁 - 允许的只有行内容器：
<strong></strong>、<em></em>、<code>、<span></span>
真正容易被忽略的是：父级用了 font-size: 0 或 display: flex 但没设 flex-direction: column，会导致 em-单位的 margin 和 text-indent 完全失效，且错误不报错、不提示，只能靠经验排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
