border-spacing失效的根本原因是border-collapse计算值为collapse，此时该属性被强制忽略；必须显式设置table{border-collapse:separate}并确认computed面板中的真实值。
border-spacing写了没反应？先看computed styles里的border-collapse
绝大多数失效问题不是写错了，而是浏览器压根没执行它。只要border-collapse的计算值是collapse，border-spacing就会被规范强制忽略——DevTools 的 “Computed” 面板里可能标为 “invalid” 或直接不显示。
- 别信“默认就是 separate”：Bootstrap、Normalize.css、甚至某行全局
table { border-collapse: collapse; }都可能悄悄覆盖 - 必须显式写
table { border-collapse: separate; }，且作用于<table> 元素本身（不是 <code><td>，不是 <code><tr>） <li>用 DevTools 的 “Computed” 面板确认 <code>border-collapse真实值，不要只看源码有没有写 - 第三方 UI 库（如 Ant Design、Element Plus）的表格组件常带默认
collapse，需额外覆盖 -
border-spacing: 8px→ 列距 8px，行距也是 8px -
border-spacing: 4px 12px→ 列距 4px，行距 12px（不是“上下 4px，左右 12px”） - 单位只能是
px、rem、vw等合法长度单位；不支持%、em、负值 - 它只作用于
<table>，写在 <code><td> 上完全无效，也不会继承 <h3>和padding、margin混用时为什么视觉错乱？</h3> <p><code>border-spacing控制的是「单元格边框外侧」的纯透明间隙；padding控制的是「内容到单元格边框内侧」的距离；而margin对<td> 和 <code><th> 完全无效——这是 display 类型决定的硬限制。 <ul> <li>想让文字离边框远点 → 改 <code>td, th { padding: 8px } - 想让两列之间宽一点 → 改
table { border-spacing: 12px 0 } - 给
<td> 加 <code>margin是白忙活，浏览器会忽略 - 用
padding模拟border-spacing会导致表格总宽不可控、边框视觉浮起、响应式错位 - 给
<td> 加 <code>padding，再配细边框如border: 1px solid transparent，制造空隙感 - 用
outline替代border，因为outline不占布局空间，配合padding更易控距 - Flex/Grid 布局下根本不能用
border-spacing——它只属于表格渲染上下文；此时请用gap、row-gap、column-gap - 真正麻烦的不是怎么写，而是查哪行 CSS 把
border-collapse给悄悄改成了collapse——这种隐式覆盖最容易漏掉，且优先级常高于你本地样式
border-spacing两个参数谁管列、谁管行？顺序不能反
border-spacing 的两个值顺序固定：第一个是**列间距**（水平方向，即相邻 <td> 左右边框之间的距离），第二个是**行间距**（垂直方向，即相邻 <code><tr> 上下边框之间的距离）。和 <code>margin 四值顺序无关，也和“行列”字面意思相反。
当border-collapse: collapse必须保留时怎么模拟间隙？
如果无法改 border-collapse（比如依赖某框架的边框合并逻辑），就放弃物理间隙，转为视觉模拟：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
