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 场景下，唯一可靠做法是额外加一个伪元素或空
<div> 作为分隔条，宽度设为 <code>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 的正中央，不能靠 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 和分割线共存时的尺寸冲突
gap 值和分割线宽度不是简单相加关系，它们在布局中的定位逻辑完全不同：gap 是轨道之间的“空白区”，而分割线是占据空间的元素或边框。混用时极易出现视觉重叠或间隙变大。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
真正难的不是让线“出现”，而是让它始终对齐 gap 中心、不破坏语义结构、不干扰响应式断点切换——尤其是当小屏切单栏时，那条线得自动消失，而不是孤零零挂在屏幕一侧。
立即学习“前端免费学习笔记（深入）”；
