border-spacing不生效最常见原因是border-collapse被设为collapse，必须显式设置table{border-collapse:separate}；其第一个值控制列间距（水平），第二个值控制行间距（垂直），仅对table元素有效，单位只支持px、rem等长度值。
border-spacing 写了没反应？不是你代码错了，大概率是 border-collapse 被设成了 collapse，浏览器直接忽略它——这是 90% 的失效根源。
为什么 border-spacing 不生效
它只在 border-collapse: separate 下起作用，而这个值极易被覆盖：
- Bootstrap、Normalize.css 或某行全局
table { border-collapse: collapse; }都会悄悄关掉它 - DevTools 的 “Computed” 面板里看
border-collapse真实值，别只信源码写了没写 -
border-spacing只对<table>元素本身有效，写在<td>或<tr>上完全被忽略 - 如果 table 被设成
display: block或display: grid，它就脱离表格渲染上下文，属性彻底失效
border-spacing: 8px 4px 到底哪个是列距、哪个是行距
顺序固定：第一个值是**列间距**（水平方向，相邻 <td> 左右边框之间），第二个是**行间距**（垂直方向，相邻 <tr> 上下边框之间）：
-
border-spacing: 6px→ 列距 6px，行距也是 6px -
border-spacing: 4px 12px→ 列距 4px，行距 12px（不是“上下 4px，左右 12px”） - 单位只能是
px、rem、vw等合法长度值，不支持%、em、负值
和 padding 混用时为啥视觉错乱
border-spacing 控制的是「单元格边框外侧」的透明间隙；padding 控制的是「内容到单元格边框内侧」的距离——它们解决的是完全不同的问题：
立即学习“前端免费学习笔记（深入）”；
- 想让文字离边框远点 → 改
td, th { padding: 8px } - 想让两列之间宽一点 → 改
table { border-spacing: 12px 0 } - 给
<td>加margin是白忙活，浏览器会直接忽略 - 在
border-collapse: collapse下硬加padding，会导致边框“浮起”，相邻单元格对不齐
当必须保留 border-collapse: collapse 时怎么模拟间距
有些框架或旧系统强依赖合并边框逻辑，这时放弃物理间隙，改用视觉模拟：
- 给
td, th加padding，再配细边框如border: 1px solid transparent - 用
outline替代border，因为outline不占布局空间，配合padding更易控距 - 复杂表格含
colspan/rowspan时，border-spacing仍生效，但跨格单元格右侧/下方的间隙位置可能偏移，得肉眼校验
真正容易被忽略的，是判断「你到底需要单元格之间的物理间隙，还是内容离边框的内边距」——弄混这两者，再调十遍样式也白搭。
