Chrome打印PDF时背景色块无法对齐文档边缘的问题排查

原因 #

出现白色边距的核心原因有三点：

1. @page 默认边距：浏览器默认给@page设置了非零边距（通常约0.5英寸），直接在页面外围产生空白。
2. HTML/Body 默认样式：html和body元素自带默认的margin和padding，会挤压色块的位置。
3. Chrome打印对话框的默认边距设置：Chrome打印界面默认开启“默认边距”，会覆盖部分CSS设置。

解决方案 #

1. 重置CSS基础样式 #

修改CSS代码，强制清除页面和元素的默认边距：

/* 重置页面边距，与letter尺寸完全匹配 */
@page {
  size: letter portrait;
  margin: 0;
}

/* 清除html/body默认边距，确保元素能铺满页面 */
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 强制设置页面尺寸与@page一致 */
  width: 8.5in;
  height: 11in;
}

/* 确保色块尺寸准确无偏差 */
.left-sidebar {
  background-color: blue;
  height: 11in;
  /* 根据你的布局需求设置宽度，例如左侧栏占2英寸：width: 2in; */
}

.intro {
  background-color: gray;
  height: 2in;
}

2. 调整Chrome打印设置 #

打开Chrome打印对话框（Ctrl+P/Command+P）：

• 在“边距”下拉菜单中选择无；
• 若“无”选项仍有空白，选择“自定义”并将所有边距设为0。

3. 处理Chrome最小边距限制（可选） #

如果上述操作后仍有细微白边，是Chrome的最小打印边距限制导致的：

• 打开chrome://flags；
• 搜索“Minimum print margin”，将选项改为Disabled；
• 重启Chrome后重新打印。

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