HTML表格需显式重置table和caption的margin（因UA样式权重高），同时清td/th的padding、设border-collapse与border-spacing为0、处理内嵌元素margin及vertical-align等，缺一不可。

HTML表格的默认外边距不是“错”，而是浏览器 UA 样式在 table、caption 元素上加的 margin，必须显式重置，通配符 * 无效。

table 和 caption 的 margin 怎么清

Chrome/Firefox/Edge 默认给 table 加 margin: 0 0 1em 0，caption 默认有 margin-bottom: 1em。这些不会被 * { margin: 0 } 覆盖，因为 UA 样式权重更高，且 caption 是块级元素，独立于单元格样式流。

• 单独写 table { margin: 0 }，别依赖通配符
• caption { margin: 0 } 必须显式声明，否则标题下方总有空隙
• 如果用了 display: block 或 float 的 table，还要检查父容器是否注入了额外 margin

td/th 的 padding 不清会导致“假边距”

即使 table 外边距归零，td 和 th 默认带 padding: 2px 5px（Chrome），视觉上就像内容离边框很远——这不是外边距，但效果一样干扰紧凑布局。

• 必须写 td, th { padding: 0 }，不能只清 table
• 如果表格里嵌了 button 或 input，它们自身也有默认 padding，需单独处理
• vertical-align: top 建议一并加上，避免多行文本因 baseline 对齐产生意外偏移

border-collapse 和 border-spacing 必须配对设

只设 border-collapse: collapse 不够，Firefox 会忽略未声明的 border-spacing，仍按 UA 默认值（通常是 2px）渲染；只设 border-spacing: 0 而不设 collapse，则相邻边框不合并，缝隙依然可见。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• 务必同时写：table { border-collapse: collapse; border-spacing: 0 }
• border-spacing 在 collapse 模式下虽无效，但显式设为 0 可防止被其他 CSS 规则（如框架重置）覆盖
• 若表格有 border，记得统一 td, th { border: none }，否则 collapse 后可能因边框颜色/宽度不一致留下色差缝

清完之后还漏了什么

最常被忽略的是单元格内嵌块级元素的 margin，比如 <td> <h3>标题</h3> <p>正文</p> </td> —— h3 和 p 自带上下 margin，会把 td 帽子撑高，看起来像“行间距变大”。

• 要么用 td > * { margin: 0 } 递归清除（注意别误伤表单控件）
• 要么改用工具类，比如 .no-margin > * { margin: 0 }，只加在需要的 td 上
• 检查开发者工具的 computed 样式，看最终生效的 margin 来源，别只盯着 table 本身

真正干净的表格重置，从来不是只删 margin 和 padding —— 它是一组相互咬合的规则，少一个，缝隙就从另一个地方钻出来。