display: table-cell 的 margin 完全无效是 css 规范强制规定，不参与盒模型外边距计算；子元素 margin 同样被忽略；唯一合法控制间距的方式是 border-spacing（需 border-collapse: separate）或 padding。
display: table-cell 的 margin 为什么完全无效
不是浏览器兼容问题，是 CSS 规范明文规定：margin 在 display: table-cell 元素上被忽略——开发者工具里会直接划掉该行，加 !important 也无效。
这是因为表格格式化上下文（table formatting context）不参与标准盒模型的外边距计算。它不走 margin collapsing 流程，也不分配外部空间，所有 margin 值（包括 margin-top、margin-left 等）全部静默丢弃。
常见错误现象：
- 给
div[display: table-cell]写margin: 10px，元素位置毫无变化 - 子元素（如
p）在table-cell内设margin-top: 20px，顶部空白依然为 0 - 用
margin: auto想居中，结果完全不生效
border-spacing 是唯一合法控制单元格间距的方式
border-spacing 是唯一能影响相邻 table-cell 之间距离的 CSS 属性，但它有严格前提：只在 border-collapse: separate 模式下生效。
实操建议：
- 必须同时设置父容器（
table或display: table元素）为border-collapse: separate -
border-spacing: 8px→ 横纵均留 8px；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 依然不会产生预期间距——这不是 bug，而是表格格式化上下文的固有行为：子元素 margin 被折叠并忽略，连 margin collapsing 都不发生。
可行解法只有两个：
- 改用
padding：比如p { padding-top: 12px; } - 包一层
div并设display: block，但要确保这个 wrapper 的父级不再是table-cell，否则仍无效 - 更稳妥的做法：直接在
table-cell元素上设padding，统一控制内部留白，避免依赖子元素margin
width 和 box-sizing 在 table-cell 中几乎无意义
width 在 table-cell 上只是“建议值”，最终宽度由整行所有单元格内容、table-layout（auto 或 fixed）共同决定；box-sizing 几乎无效，因为 width 本身就不主导尺寸计算。
典型表现：
- 写了
width: 100px; padding: 20px; border: 5px solid #000; box-sizing: border-box;，渲染宽度仍可能远大于或小于 100px -
table-layout: fixed下，首行width才具决定性；auto模式下，内容宽度优先 - 频繁切换
border-collapse值会触发重排（reflow），大型表格中应初始化就定死，别在 JS 里动态改
最常被忽略的一点：哪怕你只调 padding，也要同步确认 border-collapse 值——它决定了你正在操作的是“独立单元格”还是“合并边框下的紧凑盒子”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
