border-spacing 是唯一能真正控制表格单元格边框之间物理距离的 css 属性，仅在 border-collapse: separate 模式下生效；若失效，大概率因父级 table 被设为 collapse，需检查并显式重置为 separate。
border-spacing 是唯一能真正控制表格单元格「边框之间物理距离」的 CSS 属性，但它只在 border-collapse: separate 模式下生效——绝大多数失效问题，都卡在这一步。
为什么写了 border-spacing 却没反应？
最常见原因是父级 <table> 被其他样式（或重置库）悄悄覆盖了 <code>border-collapse 值：
-
border-collapse: collapse会直接让border-spacing完全失效，浏览器连解析都不解析 - 检查 computed styles 里
border-collapse是否真为separate，别只看源码里有没有写 - 第三方 UI 库（如 Bootstrap 4+、Ant Design）默认可能设了
border-collapse: collapse，需显式重置 - 不要在
<td> 或 <code><th> 上写 <code>border-spacing——它不接受该属性，写了也无效border-spacing 的两个值到底谁管横谁管竖？
顺序固定：第一个值是水平间距（列与列之间），第二个是垂直间距（行与行之间），和
margin/padding的「上右下左」完全不同：-
border-spacing: 6px→ 列距 6px，行距也是 6px -
border-spacing: 4px 12px→ 列距 4px，行距 12px（不是「上下 4px，左右 12px」） - 单位只支持
px、rem、vw等绝对/视口单位；%、em、负值均被忽略 - 间隙区域完全透明：无背景、无边框、无内边距，只是纯空白
和 padding、margin 混用时视觉错乱怎么办？
border-spacing、padding、margin作用层不同，但视觉叠加容易误判：-
margin对<td> 和 <code><th> 完全无效——表格单元格不响应 margin <li> <code>padding控制的是「内容到单元格边框」的距离，不是单元格之间距离 - 想让表头和第一行数据“看起来”隔开一点？改
th的padding-bottom，别动border-spacing - 如果用了
colspan或rowspan，border-spacing仍生效，但跨格单元格右侧/下方的间隙位置可能偏移，需肉眼校验 - 给
<td> 加 <code>padding，再配合细边框（如border: 1px solid transparent）制造空隙感 - 用
outline替代border，因为outline不占布局空间，配合padding更易控距 - Flex/Grid 布局下根本不能用
border-spacing——它只属于表格渲染上下文；此时请用gap、row-gap、column-gap - 兼容 IE7 及以下？只能回退到 HTML 属性
cellspacing="6"，但语义差、不可继承、现代项目不推荐
替代方案：当 border-collapse: collapse 必须保留时
无法改
border-collapse？那就放弃「物理间隙」，转为视觉模拟：真正难的不是写对那行 CSS，而是定位到哪条规则把
border-collapse改成了collapse——它往往藏在 deep selector 或 reset.css 里，不查 computed styles 根本发现不了。 -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
