border-spacing 设置行间距无效是因为 border-collapse 被设为 collapse，必须显式设为 separate；其第一个值为列间距、第二个为行间距，仅作用于 table 元素，单位不可用 % 或负值。
border-spacing 设置行间距为什么没反应
写了 border-spacing: 0 12px 却看不到行间空隙？大概率是 border-collapse 被设成了 collapse。这个值会让浏览器直接忽略 border-spacing，连 DevTools 的 Computed 面板里都可能标为 “invalid”。
必须显式给 <table> 加上：border-collapse: separate。别信“默认就是 separate”——Bootstrap、Normalize.css、甚至某行全局 table { border-collapse: collapse; } 都可能悄悄覆盖你。
- 检查 DevTools 的 Computed 样式，确认
border-collapse真实计算值是separate，不是只看源码有没有写 - 第三方表格组件（如 Ant Design）常默认
collapse，需用!important或更高优先级选择器覆盖 -
border-spacing只作用于<table>元素本身，写在<tr>或<td>上完全无效
border-spacing 的两个参数谁管行谁管列
顺序固定：第一个值是**列间距**（水平方向），第二个值是**行间距**（垂直方向）。记成「横 列、竖 行」更不容易错。
常见误写：border-spacing: 4px 12px 意思是列距 4px、行距 12px；如果写成 border-spacing: 12px 4px，结果正好反了——行缝变窄、列缝变宽，视觉上容易误判为“没生效”。
立即学习“前端免费学习笔记（深入）”；
-
border-spacing: 8px→ 列距和行距都是 8px -
border-spacing: 0 10px→ 列无缝隙，行间留 10px 空白 - 单位只能是
px、rem、vw等合法长度值，不支持%、em、负值
想调行间距，能不能用 padding 或 margin 替代
不能用 margin：对 <td> 和 <tr> 加 margin 浏览器会直接忽略，这是 display 类型决定的硬限制。
慎用 padding：给 <td> 加 padding-bottom 看似能“撑开”行距，但实际只是把内容往下推，单元格自身高度变大，相邻行内容可能重叠或错位；而且表格总高度不可控，响应式下容易崩。
- 真要控制行间物理空隙 → 改
border-spacing（配合separate） - 只想让文字离下边框远点 → 改
td { padding-bottom: 12px } - 若必须保留
border-collapse: collapse（比如依赖框架样式），就放弃物理间隙，改用outline+padding模拟：例如td { padding: 8px; outline: 1px solid transparent; }
含 colspan/rowspan 的表格里 border-spacing 还准不准
语法上仍然生效，但视觉效果容易出偏差。间隙始终出现在「相邻单元格边框之间」，不是「内容之间」——跨格单元格（如 <th colspan="2">）右侧没有列间隙，但它下方与普通 <td> 之间仍有垂直间隙。
这种不对称性在非等宽列或非对称 border-spacing（比如 4px 12px）下尤其明显，肉眼校验比理论推导更可靠。
- 避免混合使用
colspan/rowspan和非对称border-spacing做精确对齐需求 - 复杂表格建议先关掉所有边框和背景色，纯看间隙位置再微调
- 用 JavaScript 动态设置时，注意写法：
table.style.borderSpacing = '6px 10px'，不是borderSpacingX或其他变体
真正麻烦的从来不是怎么写那行 CSS，而是搞清它在哪生效、被谁拦截、以及跨格单元格的间隙到底落在哪条线上。
