border-spacing 仅对 display: table 元素（如 ）生效，且要求 border-collapse 为 separate；设为 collapse 则完全失效，不可写在 / 上，两值分别控制水平/垂直间距，不支持百分比和 em，常见失效原因是父级 table 被设为 border-collapse: collapse。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

border-spacing 在 table 上怎么生效

它只对 display: table 的元素（比如 <table>）有效，且 <code>border-collapse 必须是 separate（默认值）。一旦设成 collapse，border-spacing 就完全被忽略。

• border-spacing 是 table 元素自身的属性，不能写在 <td> 或 <code><th> 上 <li>两个值分别控制水平/垂直间距：<code>border-spacing: 8px 4px → 横向 8px，纵向 4px
• 单个值如 border-spacing: 6px 表示横向纵向都为 6px
• 不支持百分比、em 等相对单位，只能用 px、rem、vw 等绝对或视口单位

为什么设置了 border-spacing 却没看到间隙

最常见原因是父级 <table> 被强制设了 <code>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>/<code><th> 完全无效（表格单元格不参与常规盒模型流）。 <ul><li>想让文字离边框远点 → 改 <code>padding（作用于 <td>） <li>想让两列之间宽一点 → 改 <code>border-spacing（作用于 <table>） <li>给 <code><td> 加 <code>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 —— 这种隐式覆盖最容易漏掉。