border-spacing是唯一符合HTML5标准、真正控制单元格物理间距的CSS属性，仅在table元素且border-collapse为separate时生效，第一个值设列间距（水平），第二个值设行间距（垂直），不支持百分比、em和负值。
border-spacing 是当前唯一符合 HTML5 标准、语义正确且能真正控制单元格之间物理间距的方式。它不是“看起来像有间距”，而是真实在相邻单元格边框外侧插入透明间隙——背景色、阴影、父容器 border 都能透出。但写上就生效？不，90% 的失效问题都卡在同一个地方。
为什么 border-spacing 写了没反应
最直接的原因：浏览器压根没执行它。只要 border-collapse 的计算值是 collapse，border-spacing 就被规范强制忽略，DevTools 里可能标为 “invalid” 或直接不显示在 computed styles 中。
- 别信“默认就是 separate”——Bootstrap、Normalize.css、甚至某行全局
table { border-collapse: collapse; }都可能悄悄覆盖 - 必须显式写
border-collapse: separate，且作用于<table>元素本身（不是<td>，不是<tr>） - 用 DevTools 的 “Computed” 面板确认
border-collapse真实值，不要只看源码有没有写 - 第三方 UI 库（如 Ant Design、Element Plus）的表格组件常带默认
collapse，需额外覆盖
border-spacing 的两个参数到底谁管谁
顺序固定，不可颠倒：第一个值是**列间距**（水平方向，即相邻 <td> 左右边框之间的距离），第二个值是**行间距**（垂直方向，即相邻 <tr> 上下边框之间的距离）。
-
border-spacing: 8px→ 列距 8px，行距也是 8px -
border-spacing: 4px 12px→ 列距 4px，行距 12px（不是“上下 4px，左右 12px”） - 不支持
%、em、负值；单位只能是px、rem、vw等合法长度单位 - 它只作用于
<table>，写在<td>上完全无效，也**不会继承**
和 padding、margin 混用时视觉错乱怎么办
border-spacing 控制的是「单元格边框外侧」的纯间隙；padding 控制的是「内容到单元格边框内侧」的距离；margin 对 <td> 和 <th> 完全无效——这是 display 类型决定的硬限制。
立即学习“前端免费学习笔记（深入）”；
- 想让文字离边框远点 → 改
td, th { padding: 8px } - 想让两列之间宽一点 → 改
table { border-spacing: 12px 0 } - 给
<td>加margin是白忙活，浏览器会忽略 - 用
padding模拟border-spacing会导致表格总宽不可控、边框视觉浮起、响应式错位
当 border-collapse: collapse 必须保留时怎么模拟间隙
有些框架或旧系统强依赖边框合并逻辑，无法改 border-collapse。此时放弃物理间隙，转为视觉模拟：
- 给
td, th加padding，再配细边框：border: 1px solid transparent，制造“空隙感” - 用
outline替代border（因为outline不占布局空间），配合padding更易控距 - 注意：跨行/跨列单元格（
rowspan/colspan）会让border-spacing的视觉效果偏移，肉眼校验比理论推导更可靠 - Flex/Grid 布局下根本不能用
border-spacing——它只属于表格渲染上下文；此时请用gap、row-gap、column-gap
真正难的不是写对那两行 CSS，而是定位哪一行重置规则偷偷把 border-collapse 改成了 collapse——它可能藏在 node_modules 里、某个 SCSS partial 里、甚至 inline style 中。查不到，就加 !important 强覆盖，然后立刻记账，等重构时清理。
