gap仅在flex或grid容器的直系子元素间生效，需清空p默认margin并用row-gap替代简写以保兼容；首尾留白靠容器padding，局部间距差异须拆分容器。
直接用 gap 分隔段落模块是可行的，但必须满足两个硬性前提：父容器是 display: flex 或 display: grid，且所有 <p></p> 是它的直系子元素。否则 gap 完全无效。
为什么 gap 不能直接加在 <p></p> 上
很多人把 gap 当成通用“间距属性”，给 <p></p> 自己加 gap: 16px，结果毫无反应。这是因为 gap 不是元素自身的样式，而是**容器级布局控制属性**——它只作用于 flex 或 grid 容器的**直系子元素之间**，对单个 <p></p> 没有意义。
-
gap写在<p></p>标签上会被浏览器静默忽略（DevTools 的 Computed 面板里根本看不到） - 写在普通
<div>（<code>display: block）上也完全不生效 - IE 全系不支持；Safari ≤14.0 会忽略所有
gap简写（包括单值），必须拆成row-gap和column-gap - 给外层容器设
display: flex; flex-direction: column; - 清掉
<p></p>默认的margin，再用gap统一控制间距（避免叠加）
正确写法：用 flex 容器包裹 <p></p> 并设 gap
最常见、语义清晰的场景是文章摘要列表、卡片内多段文字、或响应式正文模块。关键动作只有两步：
.article-section {
display: flex;
flex-direction: column;
row-gap: 28px; /* 推荐分开写，兼容 Safari 14.0+ */
}
.article-section p {
margin: 0; /* 必须清空，默认 margin 会和 gap 叠加 */
}注意：row-gap 比 gap: 28px 更稳妥，尤其在移动端；若需兼容 iOS 14.0–14.4（仍有约 3% 用户），不要用简写。
立即学习“前端免费学习笔记（深入）”；
遇到“间隙没出现”先检查这三件事
不是代码写错了，而是布局条件没到位。调试时优先确认：
- 父容器是否真的渲染为
flex？检查 DevTools 的 Computed 面板里display值，不是block或inline -
<p></p>是否被中间层（比如<div class="wrapper">）包裹？<code>gap只认直系子项，嵌套一层就失效 - 有没有其他 CSS 覆盖了
display: flex？比如父级用了display: contents，会让子元素脱离渲染树，gap失去作用对象 - 垂直方向统一留白：
padding: 24px 0; - 左右贴边、中间等距（常见于移动端）：
padding: 0 16px;+row-gap: 24px; - 响应式调整：
@media (max-width: 768px) { .article-section { row-gap: 16px; } }，别切回margin，否则逻辑割裂
首尾留白和响应式怎么处理
gap 只管子项之间，不管容器边缘。所以“第一段顶到顶部、最后一段贴到底部”是默认行为，如需首尾留白，必须靠容器的 padding：
真正容易被忽略的是：当设计稿要求“前两段间距 24px，后三段缩到 8px”时，gap 无法局部控制——你得拆成两个独立容器，而不是试图用 :nth-child 去 hack 子项的 margin。
