border-spacing 水平间距需用双值写法，第一个值控制列间（水平）间距，第二个值控制行间（垂直）间距；必须配合 border-collapse: separate 才生效，且仅对 table 元素有效。
border-spacing 设置水平间距必须写两个值
只写 border-spacing: 12px 会让水平和垂直间距都是 12px，没法单独控制水平方向。要精确定义水平间距，必须用双值写法：border-spacing: 12px 0——第一个值管列之间（水平），第二个值管行之间（垂直）。
常见错误是误以为顺序是“行列”，结果写成 border-spacing: 0 12px，这反而把水平间距设成了 0，垂直设成 12px，完全反了。
- 想让列间空 8px、行间紧贴：用
border-spacing: 8px 0 - 想让列间空 16px、行间空 4px：用
border-spacing: 16px 4px - 单位必须是长度值，
border-spacing: 1rem 0可以，但border-spacing: 10%或border-spacing: auto会失效
水平间距不生效？先查 border-collapse
border-spacing 对水平方向的控制，前提是表格处于“边框分离”模式。只要 border-collapse 的计算值是 collapse，哪怕你写了 border-spacing: 100px 0，浏览器也直接忽略——DevTools 的 Computed 面板里甚至可能标为 “invalid”。
务必显式设置：table { border-collapse: separate; }，不能依赖“默认就是 separate”，因为 Bootstrap、Normalize.css 或项目全局样式常悄悄覆盖它。
- 检查 DevTools 中
Computed标签页下的border-collapse实际值，不是看源码有没有写 - 避免在
<td> 或 <code><tr> 上写 <code>border-spacing——它只对<table> 元素有效 <li>别用 <code>display: grid或display: block改变<table> 的 display 类型，否则渲染上下文丢失，<code>border-spacing彻底失效水平间距和 padding 容易混淆的视觉干扰
给
<td> 加 <code>padding看起来像“拉开了列距”，但它只是把文字往里推，单元格边框之间的物理距离根本没变。真正影响水平方向空隙的，只有border-spacing的第一个值。混用时典型问题：你调大了
padding，又调了border-spacing，结果表格总宽度暴增、响应式断点错位、边框在border-collapse: collapse下还“浮起来”。- 要控制内容离左边框的距离 → 改
td { padding-left: 12px } - 要控制两列单元格边框之间的透明间隙 → 只动
table { border-spacing: Xpx Ypx } -
margin对<td> 完全无效，写了等于没写 <h3>复杂表格中水平间距的边界行为</h3> <p>有 <code>colspan的单元格右侧不会出现水平间距——因为右边没有相邻单元格；但它的下方仍会按border-spacing的第二个值产生垂直间距。也就是说，border-spacing始终作用于“相邻单元格边框之间”，不是“每个单元格右侧都加空隙”。跨列合并后，水平间距只出现在真正并排的列之间。比如三列表格中，第一列
colspan="2"，那实际只剩两列“逻辑列”，水平间距只在它们之间生效一次，而不是两次。- 不要指望
border-spacing: 8px 0在每列右侧都插一个 8px 缝隙 - 如果需要统一视觉节奏，建议避免混合
colspan和非对称border-spacing（如12px 0） - 调试时用带背景色的
table和浅色边框，能一眼看出间隙是否真从边框外侧透出
border-spacing也没用。 - 不要指望
- 要控制内容离左边框的距离 → 改
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
