应统一用margin-bottom单向控制段落间距，重置浏览器默认样式，避免margin-top与margin-bottom混用导致外边距合并混乱；推荐p{margin:0.5em 0}配合:first-child和:last-child清除首尾冗余空白，或在flex容器中优先使用gap并清空子元素margin。
直接改 p 的 margin，别碰 line-height 或 padding —— 这是绝大多数人误操作的根源。
为什么正文段落之间看起来“太松”？
浏览器默认给每个 p 元素加了上下外边距（margin-top 和 margin-bottom），通常是 1em 左右。两段紧挨着时，上下 margin 会合并（collapse），但视觉上仍显宽松；若中间夹了其他元素（比如 h2、img），就容易出现意外空白。
- 不是 HTML 里敲了空行导致的——HTML 中的换行和空格在渲染时会被压缩成单个空格，不影响段间距
-
line-height控制的是段内行高，调它只会让一段文字的多行更挤或更散，跟段与段之间的距离完全无关 -
padding是段落内容到边框的距离，加它等于把每段“撑胖”，反而可能破坏对齐或触发滚动条
怎么安全地收紧段落间距？
用 CSS 覆盖默认 margin，并处理首尾段的冗余空白：
- 统一设
p { margin: 0.5em 0; }（数值按需调整，0.5em是常见紧凑值） - 清除首段顶部空白：
.article p:first-child { margin-top: 0; } - 清除末段底部空白：
.article p:last-child { margin-bottom: 0; } - 如果段落被包在 Flex 容器里（如
display: flex; flex-direction: column;），优先用gap：.article { gap: 0.5em; }，同时记得清掉子p的 margin 防叠加
Flex gap 降级时容易漏掉什么？
gap 在旧浏览器（如 IE、iOS Safari gap 不配 margin，段落会贴在一起甚至重叠。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配降级样式：
p { margin: 0.5em 0; }作为 fallback - 或者用
@supports (gap: 0.5em) { ... }包裹gap规则，确保老环境走 margin 分支 - 别对纯文本流式布局（即没设
display: flex/grid的父容器）强行用gap——它根本不起作用
真正难的不是调数字，而是意识到：段落间隙只由 margin 控制，其它属性动了也白动。很多人反复调 line-height 却发现“怎么还是那么松”，就是卡在这个认知盲区上。
