gap仅在grid或flex容器中生效，控制直系子元素间隙；双栏需设对应display，Grid用gap+grid-template-columns，Flex需align-items:flex-start；分隔线须用伪元素居中，避免border破坏布局。

双栏布局中 gap 控制间距的正确写法

gap 不是“加了就起作用”的通用属性，它只在 display: grid 或 display: flex 容器上生效，且仅控制**直系子元素之间**的间隙。双栏场景下，必须先确保父容器已设为 grid 或 flex，否则 gap 会被浏览器静默忽略。

• Grid 双栏推荐写法：grid-template-columns: 30% 70% + gap: 2rem，此时 gap 同时作用于行与列——但实际只有列间有间隙（因只有一行），等价于 column-gap: 2rem
• Flex 双栏需显式设置 align-items: flex-start，否则默认 stretch 会让两栏强制等高，视觉上显得僵硬
• Safari 14.0 及更早版本不支持 gap: 2rem 单值写法，必须拆成 row-gap: 2rem 和 column-gap: 2rem 才能生效
• gap 不处理首尾留白，左右贴边需靠容器的 padding 控制，比如 padding: 0 1.5rem

双栏之间加垂直分割线，别用 border

想在左右两栏中间加一条竖线，最常见错误是给左栏加 border-right 或右栏加 border-left。这会导致线宽计入布局、响应式错位、打印时线偏移，且无法居中对齐 gap。

• 真正适配双栏间隙的方案：用 column-rule ——但它**只对 columns / column-count 触发的多列文本流有效**，不适用于 grid 或 flex 的模块化双栏
• Grid/Flex 场景下，唯一可靠做法是额外加一个伪元素或空
  作为分隔条，宽度设为 1px，背景色填充，并用 place-self: center（Grid）或 align-self: stretch（Flex）拉满高度
• 如果坚持用 border，务必配合 box-sizing: border-box，并把边框宽度从列宽中扣除，例如左栏 flex: 0 0 calc(30% - 1px)，分隔条 width: 1px，右栏 flex: 0 0 calc(70% - 1px)
• 注意：分隔线颜色在深色模式下可能不可见，建议用 color-scheme: light dark 或媒体查询做适配

gap 和分割线共存时的尺寸冲突

gap 值和分割线宽度不是简单相加关系，它们在布局中的定位逻辑完全不同：gap 是轨道之间的“空白区”，而分割线是占据空间的元素或边框。混用时极易出现视觉重叠或间隙变大。


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• 若用伪元素实现分隔线，它的位置应在 gap 的正中央，不能靠 margin 模拟——应设 margin-inline: auto 或 justify-self: center，并确保其父容器是 grid/flex
• 当 gap: 2rem 时，再加一条 2px 宽的线，实际左右栏内容间距仍是 2rem，线只是“画”在中间；但如果用 border-right，则左栏右侧多出 2px 占位，总间隙变成 2rem + 2px
• 打印样式表中，border 默认不打印，而伪元素可设 @media print { content: "" } 显式控制，这点常被忽略
• 性能上，伪元素比额外 DOM 节点更轻量，但若需 JS 动态开关分隔线，DOM 节点更易操作

真正难的不是让线“出现”，而是让它始终对齐 gap 中心、不破坏语义结构、不干扰响应式断点切换——尤其是当小屏切单栏时，那条线得自动消失，而不是孤零零挂在屏幕一侧。