border-spacing没反应最常见原因是border-collapse被设为collapse，此时该属性被浏览器强制忽略；必须显式设置border-collapse: separate并作用于table元素，且需检查computed styles确认实际值。
border-spacing 为什么写了没反应
最常见原因是 border-collapse 被设成了 collapse。这个值一出现，border-spacing 就彻底失效——浏览器连解析都跳过，DevTools 里可能直接标为“无效”。
必须显式写 border-collapse: separate，哪怕你没动过它，也别假设它是默认值：第三方库（如 Bootstrap 4+ 的 .table）、CSS 重置、甚至某个全局 table { border-collapse: collapse; } 都可能悄悄覆盖。
- 检查 computed styles 中
border-collapse是否真为separate，不要只看源码有没有写 -
border-spacing只能写在<table> 元素上，写在 <code><td> 或 <code><tr> 上完全无效 <li>IE8 及更早版本不支持，但现代项目基本不用考虑；若需兼容 IE7，只能退用废弃的 <code>cellspacing属性 -
border-spacing: 6px→ 列距 6px，行距也是 6px -
border-spacing: 4px 12px→ 列距 4px，行距 12px（不是“上下 4px，左右 12px”） - 单位只支持
px、rem、vw等绝对或视口单位；%、em、负值均被忽略 - 用了
colspan或rowspan时，border-spacing仍生效，但跨格单元格右侧/下方的间隙位置可能偏移，需肉眼校验 - 给
<td> 加 <code>padding，再配细边框如border: 1px solid transparent，制造空隙感 - 用
outline替代border，因为outline不占布局空间，配合padding更易控距 - Flex/Grid 布局下根本不能用
border-spacing——它只属于表格渲染上下文；此时请用gap、row-gap、column-gap
border-spacing 的两个值谁管横谁管竖
顺序固定：第一个值是水平间距（列与列之间），第二个是垂直间距（行与行之间），和 margin 或 padding 的四值顺序无关。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
和 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 必须保留时怎么模拟间隙
如果无法改 border-collapse（比如依赖某框架的边框合并逻辑），就放弃物理间隙，转为视觉模拟：
真正麻烦的不是怎么写，而是查哪行 CSS 把 border-collapse 给悄悄改成了 collapse——这种隐式覆盖最容易漏掉，且优先级常高于你本地写的 border-spacing。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
