border-spacing是唯一能真正控制单元格之间物理间距的css属性，但仅在border-collapse: separate时生效；若为collapse则被规范强制忽略，且必须设在table元素上，单位仅支持px、rem等长度值，不可为负或百分比。
border-spacing 是唯一能真正控制单元格之间物理间距的 CSS 属性，但它必须和 border-collapse: separate 配合使用，否则写了也白写。
为什么 border-spacing 写了没反应
最常见原因是浏览器压根没执行它——只要 border-collapse 的计算值是 collapse，border-spacing 就被规范强制忽略。
- 别信“默认就是
separate”：Bootstrap、Normalize.css、甚至某行全局table { border-collapse: collapse; }都可能悄悄覆盖 - 必须显式写在
<table> 元素上：<code>table { border-collapse: separate; border-spacing: 6px 10px; } - 用 DevTools 的 “Computed” 面板确认
border-collapse真实值，不要只看源码有没有写 - 第三方表格组件（如 Ant Design）常带默认
collapse，需额外加!important或提高选择器权重覆盖 -
border-spacing: 4px 12px→ 列距 4px，行距 12px（不是“上下 4px，左右 12px”） - 单位只能是
px、rem、vw等合法长度值，不支持%、em或负值 - 它只作用于
<table>，写在 <code><td> 或 <code><tr> 上完全无效，也不继承 <h3>想让内容离边框远点？别碰 <code>border-spacingborder-spacing控制的是「单元格边框外侧」的透明间隙；padding控制的是「内容到单元格边框内侧」的距离。两者语义和效果完全不同。- 文字贴边？改
td, th { padding: 8px 12px; } - 两列太挤？改
table { border-spacing: 16px 0; } - 给
<td> 加 <code>margin是白忙活，浏览器直接忽略 - 用
padding模拟border-spacing会导致总宽失控、边框视觉浮起、响应式错位 - 唯一靠谱方式：给
<td> 和 <code><th> 加 <code>padding - 慎用
cellspacing或cellpadding：HTML5 已废弃，且会和 CSS 冲突（cellspacing优先级高于border-spacing） - 复杂表格（含
colspan/rowspan）下，border-spacing视觉位置容易误判，建议避免混合使用非对称值（如4px 12px）
当
border-collapse: collapse必须保留时怎么办比如你用了 UI 库的表格组件，或者需要无缝边框报表，又想让内容不贴边——这时
border-spacing完全失效，只能退回到单元格自身。真正麻烦的不是写法，而是第一眼就分清：你要的到底是「单元格之间的空隙」，还是「内容离自己边框的距离」——弄混这两者，再调十遍样式也白搭。
- 文字贴边？改
border-spacing: 6px 10px 到底谁管谁
顺序固定，不可颠倒：第一个值是**列间距**（水平方向，即相邻 <td> 左右边框之间的距离），第二个值是**行间距**（垂直方向，即相邻 <code><tr> 上下边框之间的距离）。
<ul>
<li>
<code>border-spacing: 8px → 列距 8px，行距也是 8px
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
