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