给 table 元素加 margin 是最直接有效的方式，因其为块级元素，可直接设置 margin 控制整体外框间距；而 td/th 不支持 margin，需用 padding 或 border-spacing 替代。
给 table 元素加 margin 是最直接有效的方式
表格本身是块级元素（display: table），所以可以直接设置 margin 控制它与周围元素的距离。比如想让表格下方空出 20px，就写：table { margin-bottom: 20px; }。这不会影响单元格内部间距，只作用于表格整体的“外框”。
常见错误现象：给 td 或 th 加 margin 完全无效——浏览器会静默忽略，因为表格单元格的 display 类型不支持 margin。
-
margin四值写法依然适用：margin: 10px 20px 30px 40px（上右下左） - 想居中显示表格？用
margin: 0 auto，前提是表格有明确宽度（如width: 80%或固定像素值） - 若表格嵌套在 flex 或 grid 容器里，
margin仍生效，但可能被容器对齐方式覆盖（比如justify-content: center时再设margin: 0 auto就多余）
border-spacing 不是 margin，别混用
border-spacing 是 table 的专属 CSS 属性，控制的是「单元格之间」的间隙，属于表格内部布局，和 margin 完全无关。它只对 border-collapse: separate（默认值）生效；一旦设了 border-collapse: collapse，border-spacing 就失效。
容易踩的坑：
- 误把
border-spacing当成表格外边距，结果发现表格位置没变，只是列宽变大了 - 在响应式布局中用
border-spacing模拟外边距，导致表格总宽度超出父容器（因为它增加的是内部间隙，不触发重排） -
border-spacing只接受两个值：border-spacing: 12px 6px（水平间距 12px，垂直间距 6px），不能单设上下
为什么不能给 td、th 写 margin？
这是由 CSS display 模型决定的硬限制：td 和 th 默认是 display: table-cell，而该 display 类型不支持 margin。浏览器解析时直接丢弃，不报错也不警告。
替代方案只有两个：
- 改用
padding调整单元格内容到边框的距离（td, th { padding: 8px; }） - 如果真要“撑开”某列视觉间距，可给
td套一层div，再对这个div设margin（但会增加 DOM 深度，慎用）
注意：margin 对内联元素也无效，td 和 th 虽然不是内联元素，但其 display 行为更接近——这是常被误解的关键点。
表格与其他块级元素之间的外边距塌陷（margin collapsing）
当 table 上方紧邻一个 p 或 div，且两者都设置了 margin-bottom / margin-top，它们的垂直外边距会发生合并——实际间距取两者中的较大值，而不是相加。
例如：
p { margin-bottom: 20px; }
table { margin-top: 30px; }
实际间距是 30px，不是 50px。
- 避免塌陷的常用办法：给父容器设
overflow: hidden或padding: 1px（哪怕极小） - 或者统一用
margin-bottom，全部从上往下推，不设margin-top - Flex/Grid 布局天然规避塌陷，但要注意表格在 flex 容器中默认是
align-items: stretch，可能拉高高度
真正麻烦的不是怎么加 margin，而是加完后发现“没反应”——大概率是塌陷、display 限制或选错了目标元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
