通过显式重置table、td、th、caption的margin和padding，并设置border-collapse: collapse与border-spacing: 0，可彻底清除浏览器UA默认边距；需注意line-height、vertical-align及响应式最小宽度影响。
table 和 td 默认边距怎么来的
浏览器对 table、td、th 等表格元素有隐藏的 UA 样式：比如 Chrome 会给 table 加 margin: 0 0 1em 0，td 默认带 padding: 2px 5px，th 还可能有加粗和居中。这些不是你写的，但会影响布局——尤其当你想做紧凑型数据表格或像素级对齐时，会发现“明明没写 margin/padding，怎么还有空隙？”
直接清空 table、td、th 的 margin 和 padding
最稳妥的做法是显式重置关键元素，而不是依赖 * 通配符（它对 table 内部单元格控制力弱，还可能误伤表单控件）：
-
table自身只设margin: 0，避免上下额外间距 -
td、th必须同时设padding: 0，否则单元格内容会离边框有距离 - 别忘了
caption——它默认有margin-bottom，也要清掉 - 如果用了
border-collapse: collapse，还要确认border-spacing: 0已生效（尤其在 Firefox 中）
示例代码：
table {
margin: 0;
border-collapse: collapse;
border-spacing: 0;
}
td, th, caption {
padding: 0;
margin: 0;
}
为什么 * { margin: 0; padding: 0 } 对表格无效
通配符选择器看似一劳永逸，但它对表格结构的穿透性有限：
立即学习“前端免费学习笔记（深入）”；
-
*不匹配伪元素（如td::before），而某些 UA 样式通过伪元素注入 -
caption是块级元素，但它的默认margin权重常高于*规则，需单独处理 -
border-collapse和border-spacing不属于 margin/padding，*完全不覆盖它们 - 部分浏览器（如 Safari）对
table[role="grid"]等语义化表格保留更强的 UA 样式，通配符无法触达
清完之后还要注意什么
清空默认边距只是第一步，后续容易忽略三点：
-
line-height未重置：即使padding: 0，文字在td里仍可能因行高撑开视觉空隙 -
vertical-align默认是baseline，多行文本或图标混排时会错位，建议统一设为top或middle - 响应式场景下，
td的最小宽度可能由内容撑开，导致清空 padding 后依然“看起来有边距”，此时要配合min-width: 0或overflow: hidden
真正干净的表格重置，从来不是只删 margin 和 padding。
