用gap替代margin可彻底解决空白间隙不均匀问题，因其自动避开容器边缘、仅作用于相邻子项间，且换行时行列间距一致，需父容器设display: flex或grid并配合flex-wrap: wrap生效。
用 gap 替代手动加空格或 margin
标签内部元素（比如多个 button、span 或 li）要均匀间隙，别在 HTML 里敲空格，也别给每个子元素写 margin-right——容易漏、难维护、响应式下易错乱。直接让父容器启用 display: flex 或 display: grid，然后用 gap 一锤定音。
常见错误现象：给每个按钮加 margin-right: 8px，结果最后一个也多出右边距；或者用 inline-block 后源码换行导致 4px 间隙，还死磕 font-size: 0。
-
gap只作用于 flex/grid 容器的直接子元素，自动忽略首尾冗余间距 - 支持单值（
gap: 12px）或双值（gap: 8px 16px，分别控制行/列间距） - 比
margin更健壮：flex item 换行后，gap依然保持行列一致；margin则需额外处理 - 兼容性够用：Chrome 84+、Firefox 63+、Safari 14.1+、Edge 84+，现代项目可放心用
white-space: pre-wrap 不适合控制布局间隙
有人试过给父容器设 white-space: pre-wrap，指望保留 HTML 源码里的空格来“撑开”子元素——这完全走偏了。white-space 控制的是文本节点内空白的渲染行为，对块级或 inline-block 子元素之间的布局毫无影响。
典型误用场景：把几个 div 写成 ，再加 white-space: pre-wrap，发现空格没变成间隙，因为那空格根本不在文本流里，而是被解析为元素间的空白字符，此时起效的是 display 类型，不是 white-space。
-
white-space只对元素内的文本内容生效（如hello world
- 对
inline-block元素间间隙无效；想消它，得用font-size: 0、注释隔断或换 flex - 滥用
pre-wrap还可能破坏换行逻辑，尤其配合nowrap时会吞掉所有空格
为什么不用 塞在标签之间
在两个 span 之间硬插 ，看似简单，实则埋雷。它生成的是不可折行的文本节点，既不语义化，又难控制尺寸，更没法响应式缩放。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
比如：A B，这个 渲染宽度取决于当前 font-size 和字体度量，缩放页面时它不会按比例变，而设计稿常要求固定像素间隙（如 12px）。
-
gap管理 - 批量使用时 DOM 节点数暴增，影响可读性和 JS 查询效率
- 复制网页文本时，
表格类布局慎用 border-spacing
如果是 table 里单元格要均匀间隙，别碰废弃的 cellspacing，改用 border-spacing ——但它有硬约束：必须搭配 border-collapse: separate，且只对 table 生效，无法用于 div 模拟表格。
注意：这个属性设的是单元格边框外侧的距离，不是 padding；若单元格本身有 padding，视觉间隙 = border-spacing + padding，容易叠加过量。
-
border-spacing: 8px表示横向纵向都是 8px；border-spacing: 4px 12px表示横向 4px、纵向 12px - 不支持百分比或
em单位，只能是长度值（px、rem等） - IE8+ 支持，但 IE 低版本对双值支持不稳，需测试
真正需要“均匀间隙”的地方，几乎都该交给 gap；其余方案要么是文本格式控制（white-space），要么是历史包袱（border-spacing），要么是反模式（ 塞间隙）。最容易被忽略的是：gap 不吃父容器的 font-size 影响，也不依赖源码格式，写一次就稳住整个布局节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
