table元素的外间距只能用css的margin控制，cellspacing和cellpadding不作用于外部；正确写法为table { margin: 10px 0; }或内联style="margin: 10px 0;"，且需注意外边距合并、重置样式覆盖及响应式适配问题。
HTML表格的外间距（即表格元素自身与周围其他元素之间的距离）只能用 margin 控制，cellspacing 和 cellpadding 完全不作用于外部——这是初学者最常混淆的点。
table 元素的 margin 怎么写才生效
margin 是 CSS 属性，必须作用在 <table> 元素本身（或它的父容器），不能写在 <code><tr> 或 <code><td> 上。常见错误是把 <code>margin 误加到 <td> 里，那只会让单元格内容“撑开”，不会影响整个表格位置。
<ul><li>正确写法：<code><table style="margin: 10px 0;"> 或单独写 CSS：<code>table { margin: 10px 0; }
<div> 中，也可以给这个 <code><div> 设置 <code>margin，效果等价
display: inline-table，则 margin 仍有效，但垂直方向（margin-top/margin-bottom）在某些行内上下文中可能不推挤父容器——此时建议改用 block 或加 vertical-align 配合为什么 margin 看起来没起作用？常见原因
表格外间距“消失”，往往不是 margin 写错了，而是被其他样式抵消或布局模式限制了。
- 父容器设置了
overflow: hidden或clip-path，导致margin被裁剪 - 相邻元素发生了外边距合并（margin collapse）：比如上一个
<p></p>的margin-bottom和表格的margin-top合并为一个值，看起来像“没加” - 表格用了
float或position: absolute，脱离文档流后，margin不再影响周围布局（但仍存在，只是不推挤别的元素） - CSS 重置库（如 normalize.css）或框架（如 Bootstrap）可能全局设置了
table { margin: 0; }，覆盖了你的自定义值——用浏览器 DevTools 检查 computed 样式就能确认
响应式场景下 margin 的注意事项
直接写 margin: 20px 在小屏下容易撑破容器，尤其当表格本身宽度接近 100% 时。
- 推荐用相对单位：
margin: 1em 0;或margin: 1.5rem 0;，随字体缩放自动调整 - 媒体查询中可差异化控制：
@media (max-width: 768px) { table { margin: 0.5rem; } } - 避免同时设置
margin和width: 100%——后者会让表格占满父容器，再加margin就必然溢出，此时应改用max-width: 100%+margin: auto居中留白
真正容易被忽略的是：表格外间距和内间距（border-spacing、padding）属于完全不同的层级，混用时务必分清作用对象——margin 只管“这张表离旁边多远”，其余都和它无关。
