修改打印的 HTML 页面的顶部和底部边距答案

【问题标题】：Modify the top and bottom margin of a printed HTML Page修改打印的 HTML 页面的顶部和底部边距
【发布时间】：2013-08-20 21:40:30
【问题描述】：

我希望在每个打印页面的顶部和底部留出 75 像素的边距。我尝试将页边距放在正文和包装 div 上，但这两个选项都只是在整个文档的顶部和底部添加页边距。这会在文档顶部给出 75px，然后在第二页的顶部/底部可能有 10px，最后一页将具有底部边距。

如果有帮助，我附上了一张图片：http://imgur.com/6tbHzs4

【问题讨论】：

标签： html css printing printing-web-page

【解决方案1】：

其他答案只是部分正确。您应该使用具有物理尺寸的单位（我更喜欢使用pt 而不是cm 或mm）并且您可能想要使用打印样式表。但是，如果您想设置打印页面的顶部和底部边距，您还必须使用the @page rule。你可能需要这样的东西：

<style>
@page {
    margin: 75pt 0;
}
</style>

【讨论】：

这是多页边距的最佳解决方案。而且资源链接很有帮助。

【解决方案2】：

您应该使用 cm 或 mm 作为单位（而 Printing）。

当您指定打印时，像素会导致浏览器将其转换为类似于屏幕上的样子。

使用厘米或毫米来确保纸张上的尺寸一致。

body {
    margin: 0mm 25mm 25mm 0mm;
}

【讨论】：

这只会在文档的开头和结尾添加边距，而不是每个打印的页面。看我回答使用@page 规则。

【解决方案3】：

向 CSS 中添加媒体类型

<style>
    div {
        font-family: arial;
        font-size: 10px;
        margin: 10px 10px;
    }
</style>

<style media="print">
    // CSS here will only be applied when printing
    div {
        margin: 5px 5px;
    }
</style>

您的 html 将具有上述所有 css，但更改了边距值

【讨论】：

我要打印的文档是专门为打印而制作的，因此我不需要页面在浏览器中与在一张纸上看起来不同，除了页边距。跨度>