用gap代替margin更可靠：在父容器设display: flex或grid并配gap，可避免外边距合并，提升布局可控性。
搜索结果列表用 gap 代替 margin 更可靠
直接在搜索结果容器上设 gap，比给每个 <li> 或 <article></article> 单独加 margin-bottom 更省事、更可控。它天然规避外边距合并（margin collapse）问题——比如连续多个结果项之间不会因上下 margin 重叠而变成双倍间距。
常见错误是只写 gap: 12px，却没确认父容器已启用 Flexbox 或 Grid：
- 对搜索结果列表用
display: flex; flex-direction: column;，再加gap: 12px，适用于一维垂直流（如纯文本结果） - 若结果需多列响应式排列（如卡片式），改用
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，再配gap: 16px - 旧版 Safari（gap 在 Flexbox 中生效，此时需降级为
margin-bottom+:last-child { margin-bottom: 0; }
gap 在搜索结果中影响可访问性与键盘导航
当用户用 Tab 键逐个聚焦搜索项时，gap 不会打断焦点流，但过大的值会让视觉跳转感变强；过小（如 gap: 4px）又可能让相邻项边界模糊，尤其在高对比度模式下易被误读为一个整体。
建议取值参考：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 纯文本列表：
gap: 8px～12px（兼顾紧凑与可分辨） - 卡片式结果（含图/标题/摘要）：
gap: 16px～24px，留出呼吸空间 - 移动端小屏：用媒体查询收紧，例如
@media (max-width: 480px) { gap: 12px; }
和 padding、border 混用时的层级关系
gap 是容器属性，只作用于子元素之间的空白区域，它不侵占子元素自身尺寸，也不受子元素 padding 或 border 影响。这点和 margin 不同——后者会撑开父容器或触发重排。
典型陷阱：
- 给搜索项加了
border-radius和border，但没意识到gap不会“绕过”圆角，视觉间隙仍是直角矩形，所以圆角卡片间看起来仍有“硬边”感 - 用
gap控制行间距，但忘了搜索项内部用了line-height: 1.2，导致文字贴顶——这是内容排版问题，和gap无关，别指望它修正内联行高 - 服务端返回空结果时，容器无子元素，
gap自动失效，此时需单独处理空状态样式（如.results:empty::before）
IE 和老安卓 WebView 的兼容 fallback 方案
IE 完全不支持 gap，Android 4.4 及更早 WebView 对 Flexbox gap 也无效。不能只靠 CSS 前缀补救，得有实际降级逻辑。
推荐做法：
- 用
@supports (gap: 0)包裹现代写法，把传统margin写在外面作为兜底 - 避免 JS 动态计算并注入 style——搜索结果常由模板引擎（如 Handlebars）生成，直接在 HTML 模板里预留 class 更稳定
- 如果项目已用 PostCSS，可启用
postcss-gap-properties插件，自动为 Flexbox 添加margin模拟（但仅限固定数量子项，动态列表慎用）
真正容易被忽略的是：搜索结果列表往往带加载态、错误态、空态三种非数据状态，这些节点是否也被纳入 gap 计算？答案是——只要它们是容器的直系子元素，就会被算进去。所以空提示 <div class="no-results"> 放在结果容器内时，它和前后结果项之间也会有 <code>gap，必要时得用 margin-top: 0 手动归零。
