gap仅对flex/grid容器有效，不适用于article等语义块；正确用于并列卡片/标签云等同级模块，段落间距应靠margin/padding/line-height组合实现。
gap 不是万能胶，用错地方反而让文章布局更乱——它只管子项之间，不管段落首尾、标题与正文、图片与文字的呼吸感。
gap 在 article 里到底该不该用
HTML 的 <article></article> 默认是 block 容器，gap 对它完全无效。只有设了 display: flex 或 display: grid 才能激活 gap。但文章内容天然是非线性、嵌套深、语义强的结构（<h2></h2>、<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>、<figure></figure>、<ul></ul>混排），硬套 flex 会破坏流式阅读逻辑，还可能让屏幕阅读器误读顺序。
- ✅ 正确场景：用
gap控制一组并列的卡片（<section class="cards"></section>）、标签云（<ul class="tags"></ul>）或引用块（<blockquote></blockquote>列表） - ❌ 错误场景：给整个
<article></article>加display: flex想统一控制所有段落间距 - ⚠️ 风险点：Flex 容器中子元素若设了
flex-shrink: 0，长段落会被截断；<figure></figure>里的<img alt="HTML文章布局gap怎么优化？内容分块间距指南" >若没设max-width: 100%，可能撑破容器导致gap被“压扁”不可见
替代 gap 的段落级间距方案
文章主体的呼吸感靠的是语义化盒模型组合：用 margin 做块级分隔，padding 做内部留白，line-height 和 font-size 控制行内节奏。这比强行塞进 Flex 更稳定、更可访问。
-
<h2></h2>下方留空：用margin-bottom: 1.5rem，别依赖padding-top—— 后者会让锚点定位偏移 -
<p></p>之间间距：统一设p + p { margin-top: 1rem; }，避免每个<p></p>都写margin-bottom导致底部多出空隙 -
<figure></figure>与上下文：用margin: 2rem 0，同时确保figure img有display: block（消除基线间隙） - 首段顶距：用
article > *:first-child { margin-top: 0; }清除，而不是给<article></article>加padding-top—— 后者会影响全选复制时的光标位置
Safari 14 及更早版本对 gap 的兼容处理
如果你的站点仍需支持 iOS 14.0–14.4（约 3% 存量用户），所有 gap 必须拆成 row-gap 和 column-gap 单独声明。Safari 14 完全忽略 gap: 16px 或 gap: 8px 12px，DevTools 的 Computed 面板里根本不会出现这个属性值，不是 CSS 没加载，是浏览器直接跳过。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
row-gap: 16px; column-gap: 16px;（等距）或row-gap: 8px; column-gap: 24px;（非对称） - 别加
-webkit-gap：实测在 Safari 14 中无效，纯属浪费字节 - 媒体查询中调整间距时，只改
row-gap/column-gap值，不要切回margin—— 否则维护时要同步两套逻辑
首尾留白和响应式断点怎么配合 gap
gap 天然不作用于第一个和最后一个子项与容器边缘之间。所谓“左右贴边、中间等距”的视觉需求，不能靠 gap 解决，必须用容器自身的 padding。
- 移动端卡片列表：用
.cards { padding: 0 16px; row-gap: 12px; }，padding控制左右留白，row-gap控制卡片间垂直距离 - 平板断点（768px）：把
row-gap缩到8px，同时加大padding到0 24px，让内容更居中 - 桌面端（1024px+）：可加
column-gap: 32px实现双列错位，但注意此时必须设flex-wrap: wrap，否则row-gap不生效 - 绝对别混用：
gap: 16px和row-gap: 8px同时存在时，后者会覆盖行间距，列间距却还是 16px，视觉立刻失衡
真正难的不是写对 gap，而是判断它该出现在哪一层：是语义区块之间（用 margin），还是同级模块之间（用 gap），或是内容内部节奏（用 line-height）。这三个层级一旦混淆，再细的像素调试都救不回阅读体验。
