border-spacing生效的前提是table元素显式声明border-collapse: separate，它仅作用于<table>，第一个值控制列间距、第二个值控制行间距，单位限px/rem/vw等非负长度值；padding作用于<td>/<th>控制内容内边距；margin对单元格完全无效。
border-spacing 和 padding 是唯二真正起效的手段，其他属性（比如 margin）对 <td> 和 <th> 无效——这不是 bug，是 CSS 显示模型决定的硬限制。
为什么写了 border-spacing 却没反应
最常见原因：浏览器压根没执行它。只要 border-collapse 的计算值是 collapse，border-spacing 就被规范强制忽略，DevTools 的 “Computed” 面板里甚至不显示该属性。
- 别信“默认就是 separate”——Bootstrap、Normalize.css 或某行全局
table { border-collapse: collapse; }都可能悄悄覆盖 - 必须显式写
table { border-collapse: separate; }，且只作用于<table>元素本身（不是<td>，不是<tr>） - 第三方 UI 库（如 Ant Design、Element Plus）的表格组件常默认
collapse，需额外覆盖
border-spacing 的两个参数谁管谁
顺序固定，不可颠倒：第一个值是列间距（水平方向），第二个值是行间距（垂直方向）。
-
border-spacing: 8px→ 列距 8px，行距也是 8px -
border-spacing: 4px 12px→ 列距 4px，行距 12px（不是“上下 4px，左右 12px”） - 不支持
%、em、负值；单位只能是px、rem、vw等合法长度单位 - 它只作用于
<table>，写在<td>上完全无效，也不会继承
padding 和 border-spacing 混用时视觉错乱怎么办
border-spacing 控制的是「单元格边框外侧」的纯间隙；padding 控制的是「内容到单元格边框内侧」的距离；margin 对 <td> 和 <th> 完全无效。
立即学习“前端免费学习笔记（深入）”；
- 想让文字离边框远点 → 改
td, th { padding: 8px } - 想让两列之间宽一点 → 改
table { border-spacing: 12px 0 } - 给
<td>加margin是白忙活，浏览器会忽略 - 用
padding模拟border-spacing会导致表格总宽不可控、边框视觉浮起、响应式错位
当 border-collapse: collapse 必须保留时怎么模拟间隙
有些框架或旧系统强依赖边框合并逻辑，无法改 border-collapse。此时放弃物理间隙，转为视觉模拟：
- 给
td, th加padding，并配合背景色/边框颜色制造“间隙感” - 用伪元素
::before或::after在单元格边缘渲染透明边框，再通过transform微调位置 - 若需精确控制行高，优先用
line-height而非padding，避免内容垂直溢出
真正容易被忽略的，是 border-collapse 的计算值——它不一定等于你写的那行 CSS，得看 DevTools 的 Computed 面板，而不是 Styles 面板。
