html - 当内容在多个页面上时，CSS 打印自定义大小的页边距

Question

我正在尝试打印一个可能很长且包含文本段落和表格的 HTML 页面。我的目标是为每一页 定义打印页边距。我在我的页面中添加了以下 CSS:

@media print {
    body {
        margin: 2.5cm 0;
    }
}

但我遇到的问题是页边距仅添加到文档的开头和结尾，而不是添加到每一页。正如您从所附图片中看到的那样，我在第一页上有顶部边距，但在第二页上没有，我想要的行为类似于书籍或 word 文档(您在其中定义页边距)。可以用 CSS 实现吗？

issue visibile in the print preview screen

Answer 1

打印页边距的 CSS

@page {
  margin: 1in; // margin for each printed piece of paper
}

@page :first {
  margin-top: 2in; // top margin for first page of paper
}

@media print {
  body {
    margin: 0; // 
  }
}

---

打印对话框设置

在打印预览对话框中，确保“边距”设置为“默认”。

如果“边距”设置为“无”(或其他非“默认”选项)，@page 设置将被忽略。

浏览器支持

@page is not supported in all browsers .了解有关 @page 的更多信息.