table-cell元素不支持margin是CSS规范定义的行为，浏览器会忽略它；单元格间距需用table的border-spacing（separate模式）或td/th的padding控制。
table-cell 元素为什么加 margin 没反应
因为 table-cell 的 margin 在规范里被定义为「无效」——浏览器会直接忽略它，不是 bug，是标准行为。你看到的单元格间距，其实是靠 border-spacing（表格级）或 padding（单元格内部）撑开的。
常见错误现象：
– 给 <td> 或 <th> 写了 margin: 10px，完全没变化
– 用开发者工具检查，发现 margin 字段被划掉（strikethrough）
– 误以为是选择器权重问题，反复加 !important，依然无效
- 真正控制单元格「外侧间隙」的是父级
<table>的border-spacing（仅对border-collapse: separate有效） - 控制内容与边框距离，必须用
padding，作用在<td>/<th>上才生效 - 如果用了
border-collapse: collapse，border-spacing失效，此时唯一能调整视觉间距的方式只剩padding
怎么让 td/th 看起来有「外边距」效果
没有真正的 margin，但可以模拟。关键是分清你要的效果属于哪一类：
- 想让相邻单元格之间留空？→ 改
<table>的border-spacing（例如border-spacing: 8px） - 想让单元格内容离边框远一点？→ 直接给
<td>加padding（例如padding: 6px 12px） - 想让整行/整列看起来「缩进」？→ 不要动
td，改<tr>的padding无效（tr也不支持padding），得用border-spacing配合background-clip或伪元素 hack，但通常不值得
示例：安全又通用的写法
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: separate;
border-spacing: 0;
}
td, th {
padding: 8px 12px;
}
border-collapse: collapse 和 separate 的盒模型差异
同一个 <td>，在两种模式下表现完全不同：
-
border-collapse: separate：每个单元格是独立盒子，border-spacing控制间隔，padding控制内边距，margin仍无效 -
border-collapse: collapse：单元格边框合并，border-spacing彻底失效；此时padding是唯一可控的「留白」手段，且要注意边框重叠可能吃掉部分 padding 视觉空间 - 兼容性无风险，但老版本 IE 对
border-spacing支持弱（IE7 及以下不支持），如需兼容，只能靠padding+ 结构微调
性能影响极小，但频繁切换 border-collapse 值可能触发重排（reflow），尤其在大型表格中建议初始化时就定好，避免运行时修改。
容易被忽略的 padding 细节
padding 看似简单，但在表格里有几个实际坑：
-
vertical-align会影响 padding 的视觉对齐感——比如vertical-align: top下，padding-top看得见，但padding-bottom可能被下面单元格内容「顶上来」，显得不对称 - 如果单元格里有
input、button等替换元素，它们的默认box-sizing是content-box，而td默认是border-box，混用时 padding 计算容易错乱 - 响应式表格中，用
em或rem设padding比px更稳妥，避免字号缩放后文字贴边
复杂点在于：你没法靠一个属性解决所有「间距需求」，得根据具体场景拆解——是隔开单元格，还是撑开内容，还是适配字体大小。选错方向，调试半天也白搭。
