HTML表格中如何利用CSS清空默认边距（操作指南）-html教程-PHP中文网

通过显式重置table、td、th、caption的margin和padding，并设置border-collapse: collapse与border-spacing: 0，可彻底清除浏览器ua默认边距；需注意line-height、vertical-align及响应式最小宽度影响。

html表格中如何利用css清空默认边距（操作指南）

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 中）

示例代码：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！