border-spacing 设置行间距无效是因为 border-collapse 被设为 collapse，必须显式设为 separate；其第一个值为列间距、第二个为行间距，仅作用于 table 元素，单位不可用 % 或负值。
border-spacing 设置行间距为什么没反应
写了 border-spacing: 0 12px 却看不到行间空隙？大概率是 border-collapse 被设成了 collapse。这个值会让浏览器直接忽略 border-spacing，连 DevTools 的 Computed 面板里都可能标为 “invalid”。
必须显式给 <table> 加上：<code>border-collapse: separate。别信“默认就是 separate”——Bootstrap、Normalize.css、甚至某行全局 table { border-collapse: collapse; } 都可能悄悄覆盖你。
- 检查 DevTools 的 Computed 样式，确认
border-collapse真实计算值是separate，不是只看源码有没有写 - 第三方表格组件（如 Ant Design）常默认
collapse，需用!important或更高优先级选择器覆盖 -
border-spacing只作用于<table> 元素本身，写在 <code><tr> 或 <code><td> 上完全无效 <h3>border-spacing 的两个参数谁管行谁管列</h3> <p>顺序固定：第一个值是**列间距**（水平方向），第二个值是**行间距**（垂直方向）。记成「横 列、竖 行」更不容易错。</p> <p>常见误写：<code>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> 和 <code><tr> 加 <code>margin浏览器会直接忽略，这是 display 类型决定的硬限制。慎用
padding：给<td> 加 <code>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">）右侧没有列间隙，但它下方与普通 <code><td> 之间仍有垂直间隙。 <p>这种不对称性在非等宽列或非对称 <code>border-spacing（比如4px 12px）下尤其明显，肉眼校验比理论推导更可靠。- 避免混合使用
colspan/rowspan和非对称border-spacing做精确对齐需求 - 复杂表格建议先关掉所有边框和背景色，纯看间隙位置再微调
- 用 JavaScript 动态设置时，注意写法：
table.style.borderSpacing = '6px 10px'，不是borderSpacingX或其他变体
真正麻烦的从来不是怎么写那行 CSS，而是搞清它在哪生效、被谁拦截、以及跨格单元格的间隙到底落在哪条线上。
-
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
