border-spacing 失效的根本原因是 border-collapse 被设为 collapse，必须显式声明 border-collapse: separate 才生效；它只适用于 table 元素，取值仅支持非负长度单位，单值为行列同距，双值顺序为水平/垂直，不可用 margin 替代。
border-spacing 在不同浏览器中表现不一致，根本原因不是浏览器差异，而是 border-collapse 的默认值被隐式覆盖或未显式声明 —— 现代项目里，border-spacing 失效几乎全因它被 border-collapse: collapse “静默屏蔽”了。
为什么 border-spacing 设置了却没效果
浏览器对 <table> 元素的 border-collapse 默认值确实是 separate，但以下情况会实际覆盖它：
- 第三方 CSS 框架（如 Bootstrap 4+ 的
.table类）默认加了border-collapse: collapse - 全局重置样式表（如 normalize.css、modern-normalize）可能统一设为
collapse - 父级
<table>上有内联样式或更高优先级规则强制collapse
此时哪怕你写了 border-spacing: 10px，DevTools 里也会显示该属性“已禁用”或“无效”，因为规范明确：当 border-collapse 为 collapse 时，border-spacing 被完全忽略，不参与计算，也不继承。
必须显式写 border-collapse: separate
不能依赖“默认值”，必须在应用 border-spacing 的同一选择器里，同时声明 border-collapse: separate：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: separate;
border-spacing: 8px 4px;
}
注意两点：
- 顺序无关紧要，但两个声明必须共存；只写
border-spacing不写border-collapse: separate就等于没写 - 该规则必须作用于
<table>元素本身，或display: table的容器，不能只加在<td>或<th>上 - 若使用
display: grid或display: flex模拟表格布局，border-spacing完全不适用 —— 那时候该用gap
border-spacing 的单位和取值限制
border-spacing 只接受长度值，且有硬性约束：
- 支持
px、rem、vw等绝对或视口单位；不支持%、em（尽管部分浏览器能解析em，但属非标准行为，不应依赖） - 不允许负值，写成
border-spacing: -2px会被浏览器直接丢弃 - 单值语法
border-spacing: 6px表示水平与垂直均为 6px；双值语法border-spacing: 4px 12px中，**第一个是水平（列间），第二个是垂直（行间）**，顺序不可颠倒
和 padding、margin 的关键区别
很多人试图用 margin 给 <td> 加间隙，结果无效 —— 因为表格单元格不参与常规文档流，margin 对 <td> 和 <th> 完全不起作用。
-
border-spacing控制的是「单元格边框外侧」的空白，即相邻单元格之间的物理空隙 -
padding控制的是单元格内容到自身边框的距离，属于内部空间，写在<td>或<th>上才有效 - 二者作用域不同：一个管“单元格之间”，一个管“内容与边框之间”，不能互相替代
真正容易被忽略的点是：即使你把 border-spacing 写对了，只要父级 <table> 被任何一层 CSS 规则设成了 collapse，它就彻底失效 —— 这种问题不会报错，也不会警告，只能靠检查 computed styles 里的 border-collapse 值来定位。
