table 的 margin 控制其外边距，而非 border-spacing 或 padding；需重置 body 默认 margin 并区分 border-collapse 影响，响应式下推荐 rem/vw + 媒体查询。
table 元素的 margin 控制外边距
HTML 表格本身没有“外边框距离”这个内置属性，它和所有块级元素一样，靠 margin 控制与网页边缘（或周围元素）的距离。常见错误是只给 table 加了 border 却没设 margin，结果表格紧贴页面顶部或左侧。
- 直接在
table上加style="margin: 20px;"最快见效，上下左右各 20px - 若只想控制左右居中+上下留空，用
margin: 20px auto;（auto让浏览器自动分配左右外边距） - 避免对
body设margin来“推”表格——这会影响整个页面，不是精准控制 - 注意：如果表格父容器（比如
div）有padding或margin，会叠加影响最终距离
为什么设置了 border 还看不到外边距？
因为浏览器默认给 body 加了约 8px 的 margin，而多数人又没重置它。这时你给 table 设 margin: 10px，实际看到的是 body 默认 margin + table 自身 margin 的叠加效果，视觉上容易误判。
- 先统一清掉默认干扰：
body { margin: 0; } - 再单独控制表格位置，例如：
table { margin: 16px 0; }（仅上下留空） - 如果用了 CSS 框架（如 Bootstrap），它可能已重置过
body，此时要查它的源码确认是否覆盖了你的设置 - 检查 computed styles 时，看
margin是否被其他选择器（如通配符*）意外覆盖
border-spacing 和 margin 容易混淆的点
border-spacing 控制的是单元格之间的空隙，**完全不影响表格整体离网页边缘的距离**。把它错当成“表格外边距”是调试中最常卡住的地方。
-
border-spacing: 10px;只在border-collapse: separate;下生效，作用对象是单元格边框之间 -
margin才是让整个表格“挪位置”的属性，作用对象是table元素盒模型的外边缘 - 两者互不干扰：你可以同时设
table { margin: 20px; border-spacing: 5px; }，一个管外、一个管内 - 别试图用
padding给table加外边距——它只撑开内部内容与边框的距离，不会把表格整体推开
响应式场景下怎么保持边距合理？
固定像素值（如 margin: 20px）在小屏上容易导致表格溢出或留白过大。真正可控的方式是结合相对单位和媒体查询。
立即学习“前端免费学习笔记（深入）”；
- 用
rem或vw替代px：table { margin: 1.5rem 0; } - 小屏时减小甚至归零：
@media (max-width: 768px) { table { margin: 0; } } - 如果表格嵌套在 flex 容器里，优先用
gap控制兄弟元素间距，而非依赖margin - 移动端慎用
margin: auto居中——某些安卓 WebView 对table的宽度计算不准，可能导致居中失效
body 默认 margin 和 border-collapse 对布局感知的干扰。这两个点不先理清，调半天 margin 都可能看不出效果。 
