border-spacing 仅对 display: table 元素（如 <table>）生效，且要求 border-collapse 为 separate；设为 collapse 则完全失效，不可写在 <td>/<th> 上，两值分别控制水平/垂直间距，不支持百分比和 em，常见失效原因是父级 table 被设为 border-collapse: collapse。
border-spacing 在 table 上怎么生效
它只对 display: table 的元素（比如 <table>）有效，且 border-collapse 必须是 separate（默认值）。一旦设成 collapse，border-spacing 就完全被忽略。
-
border-spacing是 table 元素自身的属性，不能写在<td>或<th>上 - 两个值分别控制水平/垂直间距：
border-spacing: 8px 4px→ 横向 8px，纵向 4px - 单个值如
border-spacing: 6px表示横向纵向都为 6px - 不支持百分比、em 等相对单位，只能用 px、rem、vw 等绝对或视口单位
为什么设置了 border-spacing 却没看到间隙
最常见原因是父级 <table> 被强制设了 border-collapse: collapse —— 尤其是某些 CSS 框架（如 Bootstrap 4+ 的 .table 类）或重置样式表会默认加这条规则。
- 检查 computed styles：看
border-collapse是否为collapse；如果是，border-spacing再怎么写也无效 - 修复方式不是“覆盖
border-spacing”，而是先重置border-collapse: separate - 注意：IE8 及更早版本不支持
border-spacing，但现代项目基本不用考虑
和 padding、margin 的区别在哪
border-spacing 控制的是单元格「边框外侧」的空白（即相邻单元格之间的空隙），而 padding 是单元格内容到自身边框的距离，margin 对 <td>/<th> 完全无效（表格单元格不参与常规盒模型流）。
- 想让文字离边框远点 → 改
padding（作用于<td>） - 想让两列之间宽一点 → 改
border-spacing（作用于<table>） - 给
<td>加margin不会起作用，别白试 - 如果用了
border-collapse: collapse，又想模拟间隙效果，只能靠padding+ 边框颜色/透明度来“假装”，但语义和可维护性都差
响应式场景下怎么安全使用
直接写死 border-spacing: 12px 在小屏上容易撑破容器。更稳妥的做法是结合媒体查询或相对单位，但要注意：Safari 对 border-spacing 的 rem/vw 支持没问题，但部分旧安卓 WebView 有渲染抖动。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：
border-spacing: clamp(4px, 1vw, 8px)（需确认目标环境支持 clamp） - 保守方案：用媒体查询分段控制，例如
@media (max-width: 768px) { table { border-spacing: 4px; } } - 避免在
border-spacing中混用不同单位（如2px 0.5em），部分浏览器会整体失效
真正麻烦的不是怎么写，而是查哪行 CSS 把 border-collapse 给悄悄改成了 collapse —— 这种隐式覆盖最容易漏掉。
