HTML转PDF时body顶部样式出现额外内边距和外边距问题

嘿，这个问题我太熟了！HTML转PDF时浏览器默认的body样式简直是隐形坑，给你几个亲测有效的解决办法：

1. 直接重置body的默认边距 #

绝大多数浏览器都会给body元素默认设置margin: 8px左右的样式，这就是你看到顶部和左侧空白的元凶。直接在CSS里把这些默认值清零：

body {
  margin: 0;
  padding: 0;
}

要是担心其他元素的默认样式搞事情，也可以用通配符一次性重置所有元素的边距，顺便加上box-sizing避免布局错乱：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 检查PDF转换工具的页面边距设置 #

有时候就算CSS里清零了，转换工具本身也会自带页面边距！比如：

• 用Chrome浏览器打印转PDF的话，在打印预览界面点开「更多设置」，把边距改成「无」
• 用wkhtmltopdf这类命令行工具的话，记得加上参数强制清零边距：

wkhtmltopdf --margin-top 0 --margin-left 0 --margin-right 0 --margin-bottom 0 input.html output.pdf

3. 用全屏容器强制包裹内容 #

如果前两种方法都没解决，给所有内容套一个全屏定位的容器，直接占满整个页面：

.page-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

然后把你的所有页面内容都放到这个.page-wrapper容器里，就能彻底摆脱body默认样式的影响啦。

内容的提问来源于stack exchange，提问作者AJAX