CSS @page设置全局margin生成PDF时跨页空白问题求解

1 修复@page规则不生效问题 #

• 优先使用打印专用单位（mm/cm/in）配置页边距，不要用px等屏幕单位，避免渲染精度问题，同时添加!important避免被其他样式覆盖，标准写法如下：

@page {
  size: A4; /* 按实际需求修改纸张尺寸 */
  margin: 15mm !important; /* 上下左右边距统一设置，也可单独指定每个方向的数值 */
  padding: 0 !important;
}

• 禁止在<html>、<body>以及页面根容器上设置和@page冲突的margin/padding属性，打印场景下建议给根容器添加box-sizing: border-box避免盒模型溢出产生额外空白。
• 如果你使用Puppeteer、Playwright等工具生成PDF，务必在生成参数中开启preferCSSPageSize: true，工具自带的margin配置优先级会高于CSS规则，需要和CSS配置保持一致。

2 解决跨页异常空白间隙问题 #

• 全局添加打印专用的分页控制属性，避免元素被强制拆分产生空白：

@media print {
  * {
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
    page-break-before: avoid !important;
  }
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
  }
  /* 如需指定位置强制分页，单独给对应元素添加 page-break-after: always 即可 */
}

• 排查页面内的块级元素，避免设置过大的margin-top/margin-bottom，垂直方向的边距重叠会在跨页时放大产生多余空白，打印场景下建议用padding替代margin实现元素间距，规避边距重叠问题。
• 检查是否存在高度超过单页剩余空间的固定高度元素，这类元素被强制分页时会在上一页末尾留下空白区域，可拆分内容或者调整元素高度适配页面尺寸。

内容的提问来源于stack exchange，提问作者Kirolos Victor v2