border-spacing 在 border-collapse: separate 时生效，用于控制表格行列间距；padding 作用于 td/th 控制内容内边距；需避免全局样式覆盖 border-collapse 默认值。
直接用 border-spacing 和 padding，别碰 cellspacing 和 cellpadding —— 它们在 HTML5 中已过时，且无法差异化控制、不响应式、易被重置样式覆盖。
为什么 border-spacing 设置后没效果
最常见原因是 border-collapse 被设成了 collapse。哪怕你写了 border-spacing: 8px 4px，只要计算后的 border-collapse 是 collapse，这个声明就完全被忽略，DevTools 的 Computed 面板里会标为 invalid。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须显式设置：
table { border-collapse: separate; }，不能依赖“默认值” - 检查第三方 UI 库（如 Ant Design、Element Plus）或重置 CSS（如 Normalize.css）是否悄悄加了
table { border-collapse: collapse; } -
border-spacing只接受两个长度值：border-spacing: 8px 4px表示列距 8px、行距 4px；单值写法border-spacing: 6px会让行列都为 6px - 单位只能是
px、rem、vw等，不支持%或负值
如何让表头和第一行内容之间有明确空隙
这个空隙就是 border-spacing 的第二个值（行间距），但它只在 border-collapse: separate 下生效，且作用于 <thead> 和紧随其后的 <code><tbody> 第一行之间。
<ul>
<li>正确写法：<code>table { border-collapse: separate; border-spacing: 0 12px; } → 列无缝、行间留 12px
<th> 加 <code>padding-bottom 或给 <td> 加 <code>padding-top —— 这只会推内容，不改变 <thead> 和 <code><tbody> 的物理位置，反而容易导致边框断裂或文字悬浮
<li>不要给 <code><tr> 加 <code>margin，display: table-row 不响应 margin
colspan，该单元格右侧无相邻列，水平方向不会产生 border-spacing 效果怎么统一又灵活地控制单元格内边距
padding 必须作用在 <td> 和 <code><th> 上，写在 <code><table> 或 <code><tr> 上无效。它控制的是内容到单元格边框的距离，和 <code>border-spacing 的“单元格之间距离”是两回事。
- 推荐用类名统一管理：
.data-table td, .data-table th { padding: 6px 12px; } - 若需区分表头与数据行：
.data-table th { padding: 10px 16px; } .data-table td { padding: 8px 16px; } - 避免硬编码像素值；小屏下可改用
padding: 0.5rem 1rem，随根字体缩放 - 别混淆视觉“宽松感”和真实结构间距：加大
padding不会增加列距，只是把文字往里推；真正拉开列之间空白，只能动border-spacing的第一个值
真正麻烦的点不在属性本身，而在于全局样式对 border-collapse 的隐性覆盖 —— 很多时候你调了半天 border-spacing 没反应，其实只是被某行 table { border-collapse: collapse; } 默默抵消了。先看 DevTools 的 Computed 值，再动手改 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
