border-spacing没反应最常见的原因是border-collapse被设为collapse，此时该属性被浏览器忽略；必须显式设置border-collapse:separate且作用于table元素，其第一个值控制列间距、第二个值控制行间距。
border-spacing 为什么设了没反应？
最常见的原因是 border-collapse 被设成了 collapse。这个值会让所有边框“焊死”在一起，border-spacing 直接被浏览器忽略——连 DevTools 的 computed 样式里都可能标为“invalid”。
- 必须显式写
border-collapse: separate，哪怕你只想要 1px 间距 - 检查全局 CSS 重置（比如
table { border-collapse: collapse; }），它会覆盖你的设置 -
border-spacing只作用于<table> 元素，写在 <code><td> 或 <code><tr> 上完全无效 <li>某些 UI 框架（如 Bootstrap）默认重置表格样式，需额外覆盖</li> <h3>border-spacing 的两个参数到底控制什么方向？</h3> <p><code>border-spacing的第一个值是水平间距（列与列之间），第二个是垂直间距（行与行之间）。顺序不能反，CSS 规范明确约定如此。
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
border-spacing: 8px→ 列距和行距都是 8px -
border-spacing: 4px 12px→ 列距 4px，行距 12px - 不支持百分比或负值；单位必须是
px、em、rem等合法长度 - 如果用 JavaScript 动态修改：
table.style.borderSpacing = '6px 10px'
能不能用 padding 替代 border-spacing？
不能。给
<td> 加 <code>padding是调整内容到单元格边框的距离，不是单元格之间的空隙。-
padding会让单元格实际变宽/变高，影响整表布局和响应式表现 - 当
border-collapse: collapse时，padding会导致边框视觉“浮起”，和相邻单元格错位 -
border-spacing产生的间隙是纯透明的，背景色、边框、阴影都能透出；padding内部仍属单元格范围 - 想让表头和第一行数据“看起来”隔开？改
th的padding-bottom，别碰border-spacing
复杂表格（含 colspan/rowspan）下 border-spacing 还可靠吗？
语法上仍然生效，但视觉效果容易误判：跨行/跨列单元格右侧或下方的间隙位置可能不符合直觉。
- 例如一个
colspan="2"的<th>，它右边不会出现“列间距”，但其下方与普通 <code><td> 之间仍有垂直间距 <li>间隙始终出现在“相邻单元格边框之间”，不是“相邻单元格内容之间”——这是理解错位的关键</li> <li>如果需要精确对齐，建议避免混合使用 <code>colspan/rowspan和非对称border-spacing（如4px 12px） - IE8+ 和所有现代浏览器均支持，但旧版 IE（≤7）不支持，此时只能退回到废弃的
cellspacing属性
真正麻烦的不是写法，而是判断「这里要的到底是单元格之间的空隙，还是内容离边框的距离」——弄混这两者，再调十遍样式也白搭。
-
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
