打印 html 页面时的边距

Question

我正在使用单独的样式表进行打印。

是否可以在设置打印边距的样式表中设置左右边距？ （即纸边距）

原文由 kobra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

指定打印时应使用 cm 或 mm 作为单位。使用像素会导致浏览器将其转换为类似于屏幕上显示的内容。使用 cm 或 mm 将确保纸张大小一致。

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

对于字体大小，印刷媒体使用 pt 。

请注意，在 css 样式中设置正文边距 不会 调整定义打印机可打印区域的打印机驱动程序中的边距，或浏览器控制的边距（可能在某些浏览器的打印预览中可调整）…只会在可打印区域内的文档上设置边距。

您还应该知道 IE7++ 会自动调整大小以最适合，即使您使用 cm 或 mm 也会导致一切错误。要覆盖此行为，用户必须选择“打印预览”，然后将打印尺寸设置为 100% （默认为 Shrink To Fit ）。

完全控制打印边距的一个更好的选择是使用 @page 指令来设置页边距，这将影响 html 主体元素之外的纸张边距，这通常由浏览器控制。请参阅 http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html 。

这目前适用于除 Safari 之外的所有主要浏览器。

在 Internet Explorer 中，页边距实际上是在设置中为此打印设置的这个值，如果你做预览你会得到这个默认值，但用户可以在预览中更改它。

 @page
{
    size: auto;   /* auto is the initial value */

    /* this affects the margin in the printer settings */
    margin: 25mm 25mm 25mm 25mm;
}

body
{
    /* this affects the margin on the content before sending to printer */
    margin: 0px;
}

相关答案： 从页面禁用浏览器打印选项（页眉、页脚、边距）？

原文由 awe 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

首先，我试图强制所有用户在打印时使用 Chrome，因为其他浏览器会创建不同的布局。

这个问题 的答案建议：

 @page {
  size: 210mm 297mm;
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm;
}

但是，我最终将此 CSS 用于要打印的所有页面：

 @media print
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}

---

特例：长桌

当我需要在多页上打印表格时， margin:0 和 @page 导致了出血边缘：

由于 这个答案，我可以解决这个问题：

 table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

加上为 @page 设置上下边距：

 @page {
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

结果：

我宁愿选择一个简洁且适用于所有浏览器的解决方案。目前，我希望以上信息可以帮助一些遇到类似问题的开发人员。

原文由 Avatar 发布，翻译遵循 CC BY-SA 4.0 许可协议