table-cell 的 margin 完全无效，因 CSS 规范明确忽略；生效的只有 border-spacing（仅 table 元素在 separate 模式下）和 padding（需配合 box-sizing: border-box 防压缩）。
table-cell 的 margin 为什么完全无效
因为 CSS 规范明确定义：margin 在 display: table-cell 元素上被忽略——不是浏览器 bug，是标准行为。你在 div 上设 display: table-cell 再加 margin: 10px，开发者工具里该行直接划掉，!important 也无效。
真正起作用的只有两件事：border-spacing（仅对 table 元素生效，且只在 border-collapse: separate 下有效）和 padding（作用于 table-cell 自身，控制内容到边框的距离）。
常见错误现象：
- 写了
td { margin: 5px; }却没任何视觉变化 - 用子元素（如
p、h3）的margin-top想撑开间距，结果被折叠甚至消失 - 误以为
border-spacing能作用于任意display: table-cell容器，实际它只认原生table结构
border-collapse: collapse 下 padding 为何“看不见”
启用 border-collapse: collapse 后，td 的盒模型计算逻辑变了：默认 box-sizing: content-box 下，你设 width: 100px; padding: 12px; border: 1px solid #000;，内容区只剩 74px 宽，文本被压缩或换行，看起来像 padding 失效了。
立即学习“前端免费学习笔记（深入）”；
解决办法是显式声明：
-
td, th { box-sizing: border-box; }—— 让width包含padding和border - 不要只给
table设box-sizing，它不影响子元素 - 即使项目用了
* { box-sizing: border-box; }，也建议显式加到td, th，因部分 reset 会重置该规则
border-spacing 和 border-collapse 的互斥关系
border-spacing 和 border-collapse: collapse 是互斥的：一旦设了 collapse，border-spacing 立即失效，无论值是多少。
如果你需要单元格间留空，只能选其一：
- 要间隙 + 独立边框 → 用
border-collapse: separate; border-spacing: 4px; - 要无缝内线效果 → 用
border-collapse: collapse;，再靠td { border: 1px solid #ccc; }控制线条，外部边框用table { border: none; }或透明边框隐藏 - IE7 及以下不支持
border-spacing，如需兼容，只能统一用padding+ 微调结构（比如外层 wrapper）
table-cell 子元素的 margin 折叠问题
哪怕父容器只是 div[display: table-cell]，其内部块级子元素（如 p、h3）的 margin-top/margin-bottom 也会被忽略——这是 table formatting context 的固有行为，连 margin collapsing 都不发生。
可行解法只有两个：
- 改用
padding：例如p { padding-top: 12px; } - 包一层
div并设display: block，但必须确认这层 wrapper 的父级**不是**table-cell，否则仍无效 - 最稳妥做法：直接在
table-cell元素上设padding，统一控制内部留白，避免依赖子元素margin
容易被忽略的一点是：border-collapse 必须写在 table 元素上才生效，写在 td、tr 或外层 div 上完全无效，且不会报错，只会让你在开发者工具里反复怀疑人生。
