直接给 <table> 元素加 CSS margin 即可控制其与外部元素的距离，因其默认为块级元素；需避免使用 HTML 的 margin 属性（无效），正确用 style 或类名配合 CSS 设置；margin 不影响内部单元格间距，后者由 border-collapse、border-spacing 或 padding 控制；注意外边距塌陷问题。
给 <table> 元素直接加 margin 就行
HTML 表格本身是块级元素（除非显式设为 display: inline-table），所以可以直接用 CSS 的 margin 控制它和周围元素的距离。不需要额外包裹、不用 JS 计算，纯 CSS 即可生效。
常见错误是试图在 <table margin="10px"> 这种写法里塞属性——HTML 标签不认 margin 属性，浏览器会直接忽略。
- 正确写法：
<table style="margin: 16px;">或<table class="data-table">+ 对应 CSS 中写.data-table { margin: 16px; } - 想只控制上下间距？用
margin-top和margin-bottom单独设，比如margin: 20px 0; - 想让表格水平居中？
margin: 0 auto;，但必须配合明确的width（如width: 80%;或固定值）
margin 不影响表格内部单元格间距
很多人误以为给 <table> 加 margin 能调整行与行、列与列之间的空隙——其实完全无关。margin 只管表格这个“盒子”整体和外部元素的距离。
表格内部的行/列间距由另外两个属性控制：
立即学习“前端免费学习笔记（深入）”；
-
border-collapse: collapse;→ 消除默认的单元格间隙（推荐） -
border-spacing: 8px;→ 在border-collapse: separate;下生效，等效于传统cellspacing - 或者用
padding控制<td>/<th>内容到边框的距离
如果发现表格看起来“挤在一起”，大概率是没处理 border-collapse，而不是 margin 设得不对。
表格外边距塌陷（collapsing margins）容易被忽略
当 <table> 上方或下方紧挨着其他块级元素（比如 <p>、<div>），它们各自的 margin-top/margin-bottom 会合并，导致实际间距小于预期。
例如：<p>文字</p><table style="margin-top: 20px;">...，若 <p> 默认有 margin-bottom: 1em，最终表格顶部可能只空出 20px 左右（取较大值），而非 20px + 1em。
- 验证方式：打开浏览器开发者工具，看 computed 样式里
margin-top是否被折叠 - 快速缓解：给表格父容器加
overflow: hidden;或padding-top: 1px; - 更稳妥方案：统一用
gap+display: grid;包裹表格和其他元素（现代布局）
移动端表格加 margin 要留意视口宽度
在小屏设备上，宽表格常会溢出容器。此时单纯加 margin 可能导致横向滚动条意外出现，或内容被截断。
- 先确保父容器有
overflow-x: auto;，再设margin - 避免用固定像素值（如
margin: 0 20px;），改用相对单位：margin: 0 5vw;或媒体查询下调整 - 如果表格必须撑满宽度，
margin改用padding作用于父容器更安全
真正麻烦的不是怎么加 margin，而是加完之后它是否按你设想的方式参与布局——尤其在嵌套、浮动、flex 容器里，margin 的行为会受 display 类型和祖先样式深度影响。
