打印html页面时的边距

Question

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

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

Answer 1

如果您知道目标纸张尺寸，您可以将您的内容放在具有该特定尺寸的 DIV 中，并为该 DIV 添加边距以模拟打印边距。 不幸的是，除了显示打印对话框之外，我认为您对打印功能没有额外的控制权。

Answer 2

我个人建议使用与px 不同的度量单位。我不认为像素在打印方面有很大的相关性。理想情况下你会使用：

• 点 (pt)
• 厘米（厘米）

我相信还有其他的，一篇关于 print-css 的优秀文章可以在这里找到：Going to Print，Eric Meyer。

Answer 3

指定打印时应使用cm 或mm 作为单位。使用像素将导致浏览器将其转换为类似于屏幕上的样子。使用cm 或mm 将确保纸张尺​​寸一致。

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

对于字体大小，请使用pt 作为打印媒体。

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

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

完全控制打印边距的更好选择是使用@page 指令设置纸张边距，这将影响html body 元素之外的纸张边距，该元素通常由浏览器控制。见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;  
} 

相关答案： Disabling browser print options (headers, footers, margins) from page?

Answer 4

更新的简单解决方案

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

旧解决方案

为每个页面创建部分，并使用以下代码调整边距、高度和宽度。

如果您打印的是 A4 尺寸。

然后是用户

尺寸：8.27 英寸和 11.69 英寸

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
} 

然后创建一个包含所有内容的 div。

<div class="Section1"> 
    type your content here... 
</div>

Answer 5

我还推荐 pt 与 cm 或 mm 相比，因为它更精确。 此外，我无法让@page 在 Chrome 中工作（版本 30.0.1599.69 m）它忽略了我为边距放置的任何内容，无论大小。但是，你可以让它与文档的正文边距一起工作，很奇怪。

Answer 6

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

this question 的回答建议：

@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 正在导致流血边缘：

感谢this answer，我可以解决这个问题：

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;
}

结果：

我更喜欢简洁且适用于所有浏览器的解决方案。目前，我希望以上信息可以帮助一些有类似问题的开发者。