border-spacing是唯一符合html5标准、真正控制单元格物理间距的css属性，但仅在border-collapse: separate时生效；若为collapse则被规范强制忽略，且必须设在table元素上，单位仅支持px、rem等长度值，不可为负或百分比。

border-spacing 是唯一符合 HTML5 标准、能真正控制单元格之间物理间距的方式。写上就生效？不，90% 的失效都卡在 border-collapse 没设对。

为什么 border-spacing 写了没反应

最直接原因：浏览器压根没执行它。只要 border-collapse 的计算值是 collapse，border-spacing 就被规范强制忽略——DevTools 的 Computed 面板里可能标为 “invalid” 或根本不显示。

• 别信“默认就是 separate”，Bootstrap、Normalize.css 或项目全局样式常悄悄加了 table { border-collapse: collapse; }
• 必须显式写在 <table> 元素上：<code>style="border-collapse: separate; border-spacing: 6px;"，不能写在 <td> 或 <code><tr> 上 <li>用 DevTools 的 “Computed” 面板确认真实值，不是看源码有没有写</li> <li>第三方表格组件（如 Ant Design）默认用 <code>collapse，需额外覆盖

border-spacing 两个参数谁管谁

顺序固定，不可颠倒：第一个值是**列间距**（水平方向，即相邻 <td> 左右边框之间的距离），第二个值是**行间距**（垂直方向，即相邻 <code><tr> 上下边框之间的距离）。 <ul> <li> <code>border-spacing: 8px → 列距 8px，行距也是 8px

• border-spacing: 4px 12px → 列距 4px，行距 12px（不是“上下 4px，左右 12px”）
• 不支持 %、em、负值；单位只能是 px、rem、vw 等合法长度单位
• 它只作用于 <table>，写在 <code><td> 上完全无效，也**不会继承** <h3>别用 <code>padding 模拟单元格间距

  padding 控制的是内容到单元格边框内侧的距离，不是单元格之间的空隙。混用会导致视觉和布局错乱：

  

  html-to-pptx

  将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

  下载
  • 给 <td> 加 <code>padding 看起来像有间距，但单元格边框之间仍是紧贴的——背景色、阴影、父容器 border 都透不出来
  • 表格总宽度不可控（padding 累加进单元格尺寸）
  • 在 border-collapse: collapse 下，padding 会让边框“浮起来”，交叠处出现视觉 bug
  • 想让文字离左边框远点 → 改 td { padding-left: 12px }；想让两列之间宽一点 → 只动 table { border-spacing: 12px 0 }

  复杂表格中 border-spacing 的边界行为

  border-spacing 始终作用于“相邻单元格边框之间”，不是每个单元格都无条件加间隙：

  • 带 colspan 的单元格右侧没有相邻单元格，所以**不产生列间距**；但它下方仍按第二个值产生行间距
  • 有 <colgroup></colgroup> 或 <col> 时，border-spacing 不影响列宽计算逻辑——别指望它能“撑开”列宽
  • 移动端小屏下过大的值（如 12px）易导致表格溢出视口，建议搭配 overflow-x: auto 或响应式断点重置
  • IE8 及更早版本不支持 border-spacing，若必须兼容，只能退回到已废弃的 cellspacing（并接受其不稳定行为）

  真正容易被忽略的是：它只在 border-collapse: separate 下起效，且无法局部控制某行或某列——需要差异化间距时，得换思路：嵌套表格、display: grid 模拟，或接受语义妥协。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！