td 的 margin 属性被 CSS 规范明确定义为忽略，真正起作用的是 border-spacing（用于 table，仅在 border-collapse: separate 时有效）和 padding（用于 td/th，border-collapse: collapse 下唯一可用留白手段）。
td 的 margin 属性被 CSS 规范明确定义为忽略
不是浏览器兼容问题，也不是写法错误——margin 在 <td>、<th> 或任何 display: table-cell 元素上根本不会生效。开发者工具里会直接划掉该行样式，加 !important 也无济于事。
这是 CSS 2.1 规范第 17.4 节明确规定的：table-cell 的 margin 必须被忽略。它不属于“未实现”，而是“有意不支持”。
真正起作用的两个属性：border-spacing 和 padding
想控制单元格之间的“空隙”，必须分清你要调的是什么：
-
border-spacing：只作用于<table>，控制相邻单元格边框之间的物理距离，但仅在border-collapse: separate（默认值）下有效 -
padding：作用于<td>或<th>，控制内容到单元格边框的距离，border-collapse: collapse下是唯一可用的留白手段
常见误操作：table { border-collapse: collapse; } + td { margin: 5px; } → margin 白写；td { border-spacing: 10px; } → 语法错误，border-spacing 不是 td 的属性。
立即学习“前端免费学习笔记（深入）”；
子元素的 margin 在 td 里也失效
哪怕你在 <td> 里放一个 <p>，给它设 margin-top: 12px，它也不会撑开单元格顶部空间——这不是 margin collapse，而是 table formatting context 的强制行为：内部块级子元素的 margin 被完全忽略。
可行解法只有：
- 改用
padding-top直接加在<td>上 - 把
<p>包一层<div style="display: block; margin-top: 12px;">，但前提是这个<div>的父容器不能是table-cell - 统一用
line-height或vertical-align配合字体大小微调视觉行高
容易被忽略的关键点：border-collapse 值决定你正在操作哪套盒模型
同一个 <td>，在 separate 和 collapse 模式下，它的“间距”含义完全不同：
-
border-collapse: separate→ 单元格是独立盒子，border-spacing控制间隙，padding控制内边距，margin无效 -
border-collapse: collapse→ 边框合并，border-spacing彻底失效，padding是唯一可控留白方式，但要注意边框重叠可能视觉上“吃掉”部分 padding
最常出问题的是：改了 padding 却没注意当前 border-collapse 是 collapse 还是 separate，结果调了半天发现空隙根本没变——先看 computed styles 里的 border-collapse 值，比瞎调 padding 有用得多。
