段落间距应利用margin塌陷特性实现，浏览器默认p{margin:1em 0}，相邻段落仅显示1em间距；推荐统一设margin-bottom并用:first-child/:last-child清除首末多余边距。
直接用 margin 塌陷本身就能实现干净、一致的段落间距，不需要额外 hack —— 关键是理解它本就是 CSS 的设计意图，不是 bug。
为什么段落 p 标签默认只设 margin-bottom 就够了
浏览器对 p 的默认样式通常是 margin: 1em 0;，即上下都有外边距。但相邻 p 元素之间只会显示一个 1em 间距，而不是 2em，这正是 margin 塌陷在起作用。
- 塌陷让多段文本自然“呼吸”，避免段间距随段落数量线性累加
- 如果手动给每个
p同时设margin-top和margin-bottom，反而容易在首尾引入多余空白（比如body顶部/底部多出1em） - 现代排版实践中，统一用单边距（如只设
margin-bottom）是更可控的方式
如何避免首段顶边和末段底边的意外塌陷
当 p 是容器第一个或最后一个子元素时，它的 margin-top 或 margin-bottom 会和父容器（如 article）发生塌陷，导致内容贴边或底部留空异常。
- 给父容器设
padding-top: 1em可隔离首段margin-top，不改变视觉间距，也不触发 BFC 带来的副作用 - 同理，
padding-bottom: 1em拦住末段margin-bottom - 慎用
overflow: hidden：虽能阻止塌陷，但可能截断阴影、下拉菜单等溢出内容 - 不要给
body设margin来“修正”——它会和第一个p塌陷，造成不可预测偏移
自定义段落间距时，margin 值怎么选才不翻车
塌陷的计算规则直接影响最终效果：两个正数 margin 相遇取最大值，一正一负则相加。这意味着混合使用不同数值时极易失控。
立即学习“前端免费学习笔记（深入）”；
- 保持所有段落用相同单位、相同方向的 margin，例如统一
p { margin-bottom: 1.5rem; } - 避免混用
rem和em：后者基于父字体大小，在嵌套结构中会放大误差 - 若需首段无上边距、末段无下边距，用选择器精准控制：
p:first-child { margin-top: 0; }、p:last-child { margin-bottom: 0; } - 注意：
:first-child和:last-child匹配的是 DOM 顺序，不是语义段落顺序；如果中间插了figure或h2，就得改用:first-of-type
真正难的不是“解决塌陷”，而是接受它本来就是排版的基础设施——强行禁用反而让样式更脆弱。最稳妥的段落系统，往往建立在对塌陷的预期之上，而不是对抗它。
