table-cell 的 margin 完全无效，因 CSS 规范明确忽略；唯一合法控制单元格间距的是 border-spacing（仅在 border-collapse: separate 下生效）和 padding。
table-cell 的 margin 为什么完全没用
因为 CSS 规范明确定义：table-cell 元素的 margin 属性被忽略——不是浏览器 bug，是标准行为。你在 <td>、<th> 或 div[display: table-cell] 上写 margin: 10px，开发者工具里会直接划掉该行，加 !important 也无效。
真正起作用的是两件事：border-spacing（控制单元格之间间隙）和 padding（控制内容到边框的距离）。选错地方调样式，永远看不到效果。
如何安全控制单元格之间的“外间距”
border-spacing 是唯一合法控制相邻 table-cell 之间距离的方式，但它只在 border-collapse: separate 模式下生效：
- 设
table { border-collapse: separate; border-spacing: 8px; }→ 单元格间横向纵向都留 8px 空隙 - 设
table { border-collapse: separate; border-spacing: 0 4px; }→ 横向 0，纵向 4px（即行间距） - 一旦用了
border-collapse: collapse，border-spacing彻底失效，此时只能靠padding“撑开”视觉空间 - IE7 及以下不支持
border-spacing，如需兼容，只能统一用padding+ 结构微调（比如额外 wrapper）
子元素的 margin 在 table-cell 内为何也失效
即使你把一个 div 设为 display: table-cell，它内部的 <p>、<h3> 等块级子元素的 margin-top 或 margin-bottom 依然不会产生预期间距——这是 table formatting context 的固有行为，子元素 margin 被折叠并忽略，连 margin collapsing 都不发生。
立即学习“前端免费学习笔记（深入）”；
解决办法只有两个：
- 给子元素改用
padding（例如p { padding-top: 12px; }） - 把子元素包一层
div并设display: block+margin，但必须确认父容器不是table-cell；否则仍无效 - 更稳妥的做法：直接在
table-cell元素上设padding，统一控制内部留白，避免依赖子元素 margin
border-collapse: collapse 和 separate 的盒模型差异
同一个 <td> 在两种模式下，视觉表现和可调参数完全不同：
-
border-collapse: separate：每个单元格是独立盒子，border-spacing控制间隔，padding控制内边距，margin无效 -
border-collapse: collapse：边框合并，border-spacing失效，padding成为唯一可控的留白手段；但要注意边框重叠可能吃掉部分padding的视觉空间 - 频繁切换
border-collapse值会触发重排（reflow），大型表格中建议初始化就定死，别在 JS 里动态改
最常被忽略的点：哪怕你只调 padding，也要同步检查 border-collapse 值——它决定了你正在操作的是“独立单元格”还是“合并边框”，两者对 padding 的渲染反馈并不一致。
