border-spacing 是表格原生且唯一的单元格间距控制方式，仅在 border-collapse: separate 时生效，首值为列距、次值为行距，不可用百分比或负值，不等同于 padding。
border-spacing 不是“模拟”网格间距，它就是表格的原生单元格间距
border-spacing 不是 hack 或模拟手段，而是 HTML5 标准中唯一正统、语义正确、物理生效的单元格间距控制方式。它在 border-collapse: separate 模式下，真实地在相邻单元格边框外侧插入透明间隙——背景色、父容器 border、box-shadow 全部可透出，和 Grid 的 gap 在视觉目标上一致，但底层机制完全不同。
写了 border-spacing 却没效果？先查 border-collapse
浏览器只在 border-collapse: separate 时解析 border-spacing；一旦计算值为 collapse，该属性直接被忽略（DevTools 中常标为 “invalid”）。常见干扰源包括：
- 全局 CSS 重置（如 Normalize.css、Bootstrap 的
.table类） - 某行隐藏的
table { border-collapse: collapse; } - UI 框架组件（Ant Design、Element Plus）默认启用边框合并
- 你自己的样式表里写了
border-collapse: collapse却忘了删
必须显式写：
table {
border-collapse: separate;
border-spacing: 8px 4px;
}
且只作用于 <table> 元素本身，写在 <code><td> 或 <code><tr> 上无效。
<h3>
<code>border-spacing: 8px 4px 到底哪边是列距、哪边是行距？
顺序固定：第一个值是列间距（水平），第二个是行间距（垂直），和 margin 四值写法无关。
立即学习“前端免费学习笔记（深入）”；
-
border-spacing: 8px→ 列距 8px，行距也是 8px -
border-spacing: 8px 4px→ 列距 8px，行距 4px（不是“上下 8px，左右 4px”） - 不支持
%、em、负值；单位只能是px、rem、vw等合法长度
别记反顺序——这是最容易手滑写错的地方，写成 4px 8px 却指望列更宽，结果行反而撑高了。
别用 padding 替代 border-spacing，它们解决的是不同问题
padding 控制的是内容到单元格边框内侧的距离，border-spacing 控制的是单元格边框外侧的真实物理间隙。混用会导致：
- 给
<td> 加 <code>padding后再设border-spacing，表格总宽度不可控（padding 累加进尺寸，border-spacing 额外撑开） -
margin对<td> 和 <code><th> 完全无效（display 类型限制） <li>在 <code>border-collapse: collapse下硬加padding，会让边框“浮起”，相邻单元格对不齐
真要留白：列间空隙 → 改 border-spacing；文字离边框远 → 改 td, th { padding: 8px }。
真正容易被忽略的，是判断「你到底需要单元格之间的空隙，还是内容与边框之间的呼吸感」——这两个目标不能靠同一个 CSS 属性达成。
