gap仅对Flex/Grid容器生效，普通div无效；需设display:flex或grid才能启用gap；Flex中gap同时作用于主轴与交叉轴；Grid中gap更适配多列响应式布局；gap不处理首尾留白，须用padding补充。

gap 只对 Flex/Grid 容器生效，普通 <div> 上加没用 <p>资讯流常见写法是用一堆 <code><article></article> 或 <div class="news-item"> 并列排布，但若父容器只是普通块级元素（<code>display: block），加 gap: 16px 完全无效——浏览器直接忽略。必须先声明布局模式：

• 资讯流横向滚动或单行排列 → 用 display: flex + flex-wrap: wrap
• 资讯流网格化（如卡片式多列） → 用 display: grid + grid-template-columns
• 别给 <ul></ul> 或 <section></section> 直接加 gap，除非你已改它的 display 值

Flex 容器中 gap 的行为：主轴+交叉轴都受影响

在 display: flex 下，gap 不分方向，它同时控制主轴（如 flex-direction: row 时的左右）和交叉轴（此时为上下）间隙。这意味着：

• 若资讯流是竖向堆叠（flex-direction: column），gap: 24px 就是每条新闻块之间的垂直距离
• 若设了 flex-wrap: wrap（比如响应式换行），gap 依然生效，且行与行之间、同排项之间都保持该值
• 注意：子项自身若有 margin-bottom，会和 gap 叠加，造成视觉上双倍间距——调试时先清掉子项的 margin

Grid 容器中 gap 更适合多列资讯流

多数资讯流需要响应式多列（如桌面 3 列、平板 2 列、手机 1 列），display: grid 配合 gap 是更自然的选择：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) 自动计算列数，gap: 16px 控制所有行列间隙
• 想单独控制行距/列距？用 row-gap: 12px + column-gap: 24px，比 gap: 12px 24px 更易读、不易错序
• IE11 不支持 gap，若需兼容，得回退到 margin + :not(:first-child)，但现代资讯站基本可放弃 IE

gap 不处理首尾留白，这点常被忽略

gap 只作用于“直系子元素之间”，不会在第一个新闻块顶部或最后一个底部自动加空隙。结果就是资讯流紧贴容器上下边缘：

立即学习“前端免费学习笔记（深入）”；

• 要首尾留白，必须显式加 padding-top 和 padding-bottom 到父容器
• 或者用 margin 单独处理首尾项（不推荐，破坏统一性），不如统一用 padding
• 尤其要注意：当资讯流嵌套在另一个有 overflow: hidden 的容器里时，靠 margin 外推可能被截断，而 padding 更安全