border-spacing生效的前提是table元素必须设置border-collapse:separate，且该属性仅作用于table元素；第一个值控制列间距（水平），第二个值控制行间距（垂直），不支持负值和百分比。
border-spacing 能生效的前提只有一个：border-collapse 必须是 separate，且必须写在 <table> 元素上。其他所有写法，90% 都是白忙活。
为什么写了 border-spacing 却没反应
浏览器直接忽略它——不是渲染问题，是规范强制不执行。只要计算后的 border-collapse 值是 collapse，border-spacing 就被当作无效声明处理，DevTools 的 Computed 面板里可能标为 “invalid” 或干脆不显示。
- 别信“默认就是 separate”：Bootstrap、Normalize.css、甚至某行全局
table { border-collapse: collapse; }都可能悄悄覆盖 - 必须显式写
table { border-collapse: separate; }，且作用于<table>本身（不是<td>，不是<tr>） - 用 DevTools 的 “Computed” 面板确认真实值，不要只看源码有没有写
- 第三方表格组件（如 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会导致表格总宽不可控、边框视觉浮起、响应式错位
真正麻烦的不是语法，而是判断「这里要的到底是单元格之间的空隙，还是内容离边框的距离」——弄混这两者，再调十遍样式也白搭。尤其是带 colspan/rowspan 的表格，间隙位置容易误判，得靠肉眼校验。
