table-cell 的 margin 完全无效，因 css 规范明确忽略；唯一合法控制单元格间距的是 border-spacing（仅在 border-collapse: separate 下生效）和 padding。
table-cell 的 margin 为什么完全没用
因为 CSS 规范明确定义：table-cell 元素的 margin 属性被忽略——不是浏览器 bug，是标准行为。你在 <td>、<code><th> 或 <code>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></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<h3></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> 在两种模式下，视觉表现和可调参数完全不同：
<ul>
<li>
<code>border-collapse: separate：每个单元格是独立盒子，border-spacing 控制间隔，padding 控制内边距，margin 无效
border-collapse: collapse：边框合并，border-spacing 失效，padding 成为唯一可控的留白手段；但要注意边框重叠可能吃掉部分 padding 的视觉空间border-collapse 值会触发重排（reflow），大型表格中建议初始化就定死，别在 JS 里动态改最常被忽略的点：哪怕你只调 padding，也要同步检查 border-collapse 值——它决定了你正在操作的是“独立单元格”还是“合并边框”，两者对 padding 的渲染反馈并不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
