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

Question

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

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

但是我遇到的问题是边距仅添加到文档的开头和结尾，而不是添加到每一页。正如您从附加图像中看到的，我在第一页中有页边距顶部，但在第二页中没有，我想要的行为类似于书籍或 Word 文档（您定义页边距）。是否可以在 CSS 中做到这一点？

在打印预览屏幕中问题可见

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。了解有关@page 的更多信息。

Answer 2

请试试这个：

@media print {
   body {
   display:table;
   table-layout:fixed;
   padding-top:2.5cm;
   padding-bottom:2.5cm;
   height:auto;
    }
}