HTML表格在不同浏览器内核下的默认外边距差异排查-html教程-PHP中文网

表格默认 margin 和 padding 需查开发者工具 computed 面板，因来自 ua 样式；常见 table 有上下 margin，td/th padding 各浏览器差异大；通配符重置无效，须显式重置 table、th、td 等所有表格相关元素。

html表格在不同浏览器内核下的默认外边距差异排查

表格元素的默认 margin 和 padding 值在哪查

直接看浏览器开发者工具的 Computed 面板，不是 Styles 面板——因为默认值来自 user agent stylesheet，不会出现在你写的 CSS 里。重点检查 table、td、th 这三个标签的 margin 和 padding 计算结果。

常见现象：table 在 Chrome 中默认 margin-top: 1em; margin-bottom: 1em，Firefox 可能是 0.83em，IE/Edge Legacy 甚至加了 margin-left: auto; margin-right: auto 导致居中；td 的 padding 更离谱：Chrome 默认 padding: 1px 2px，Firefox 是 4px，Safari 某些版本对 th 单独加了 padding: 0.5em。

别信“没写样式就等于没边距”——所有表格相关标签都有 UA 默认值
border-collapse: collapse 不影响 padding，只控制边框合并，别误以为它能抹掉内边距
用 getComputedStyle(document.querySelector('table'), null) 在控制台手动验证，比肉眼更准

为什么 `* { margin: 0; padding: 0 }` 对表格无效

它有效，但只作用于元素自身，不穿透到表格内部的渲染逻辑。表格是 display: table 的特殊格式化上下文，td 的 padding 由表格模型决定，table 的 margin 虽被清零，但 caption、thead、tbody 等子元素仍有独立默认 margin，且部分浏览器（如旧版 Safari）会忽略通配符对 colgroup 或 col 的重置。

Comet AI 浏览器

下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。

下载

必须显式重置：table, th, td, caption, thead, tbody, tfoot { margin: 0; padding: 0; }
caption 尤其危险：Chrome 默认 margin-top: 0.67em，Firefox 是 0.89em，且位置（top/bottom）还受 caption-side 影响
如果用了 border-spacing，它和 padding 是叠加关系，不是替代关系

表格单元格垂直对齐和行高在不同内核下的表现差异

vertical-align 在表格单元格里行为一致，但实际视觉高度取决于 line-height 和字体渲染引擎。Firefox 对小字号（font-size: 12px）的 line-height: normal 解析偏高，导致 td 内容“上浮”；WebKit 内核（Chrome/Safari）则倾向压缩行高，内容贴底。

统一方案：给 td, th 显式设 line-height: 1.4;，并配合 vertical-align: middle;
避免用 height 硬控 td——IE 和旧 Edge 会忽略，WebKit 可能截断内容
若需精确控制单元格高度，用 min-height + padding 组合，比 height 更可靠

火狐和 Chrome 表格宽度不一致的根本原因

不是 margin/padding 差异，而是 table-layout 的默认值和列宽计算逻辑不同。Chrome 默认 table-layout: auto，按内容撑开列宽；Firefox 在某些版本下对空单元格或含 input 的单元格会启用更激进的收缩策略；Safari 则对百分比宽度解析存在舍入误差。

强制统一：给 table 加 table-layout: fixed;，再用 width 和 col 标签定义列宽
避免在 td 上直接设 width——它只在 fixed 模式下生效，auto 模式下会被内容覆盖
如果用了 colgroup，确保每个 col 都有明确 width，否则 Firefox 可能跳过未声明的列做自适应

真正麻烦的不是数值差异，而是表格模型本身在不同引擎里没有完全对齐的规范实现——哪怕写了相同 CSS，border-collapse + empty-cells + 字体 hinting 三者叠加，就足以让 1px 宽度偏差变成布局错位。动手前先确认是否真需要跨浏览器像素级一致，还是只需视觉合理即可。