table、tr、td及display: table-cell/row元素上margin强制无效，因css规范要求表格格式化上下文中margin必须被忽略；替代方案为border-spacing（仅separate模式下生效）和padding。
margin 在 table、tr、td 及其 display: table-cell / display: table-row 元素上完全无效——这不是浏览器兼容问题，是 CSS 规范强制要求的行为。
为什么 table 和 td 上的 margin 会被忽略
CSS 规范明确定义：所有参与表格格式化上下文（table formatting context）的元素，包括原生 table、tr、td，以及通过 display: table-cell 模拟的单元格，其 margin 属性必须被忽略。开发者工具中该属性会直接显示为划掉状态，加 !important 也无济于事。
真正能控制“间距”的只有两个合法出口：
-
border-spacing：仅在border-collapse: separate下生效，控制相邻单元格之间的间隙 -
padding：作用于td/th/display: table-cell元素自身，控制内容到边框的距离
如何替代 margin 控制表格单元格间距
想让单元格之间有空隙，别碰 margin，改用 border-spacing：
table {
border-collapse: separate;
border-spacing: 0 8px; /* 横向 0，纵向 8px（即行间距） */
}
注意以下关键点：
- 一旦设了
border-collapse: collapse，border-spacing彻底失效，此时只能靠padding“视觉撑开” -
border-spacing不支持百分比或负值 - IE7 及更早版本不支持
border-spacing，如需兼容，统一用padding+ 外层 wrapper 微调
为什么给 td 子元素设 margin-top 也不起作用
即使你在 td 里放一个 div 并设置 margin-top: 12px，它大概率不会产生预期间距——因为 table-cell 创建的是表格格式化上下文，其内部块级子元素的垂直 margin 会被折叠并忽略，连 margin collapsing 都不发生。
可靠做法只有：
- 直接给
td设padding-top - 把子元素包一层
div并设display: block，但必须确保这个 wrapper 的父级**不是**table-cell（否则仍无效） - 改用 Flex 布局替代表格布局，
margin在flex-item上天然可用
容易被忽略的细节：border-collapse 值决定你正在操作哪个盒模型
同一个 td，在 border-collapse: separate 和 border-collapse: collapse 下是两种完全不同的盒子：
-
separate：每个单元格是独立盒子，border-spacing控制间隔，padding控制内边距，margin无效 -
collapse：边框合并，border-spacing失效，padding是唯一可控的留白手段；但要注意边框重叠可能吃掉部分padding的视觉空间
最常被忽略的一点：哪怕你只调 padding，也得先确认当前 border-collapse 是什么值——它决定了你写的那行 padding 到底有没有机会生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
