打印html页面时的边距

我正在使用单独的样式表进行打印。是否可以在样式表中设置左右页边距，从而设置打印页边距（即纸张上的页边距）。

谢谢。

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

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

对于字体大小，pt用于打印介质。

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

您还应该知道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;  
} 

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

首先，我试图强迫所有用户在打印时使用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;
}

结果：

我宁愿选择一种简洁且可在所有浏览器上使用的解决方案。就目前而言，我希望以上信息可以为一些遇到类似问题的开发人员提供帮助。

更新的简单解决方案

@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>

我个人建议使用不同于的计量单位px。我认为像素在打印方面没有太大关系。理想情况下，您将使用：

• 点（pt）
• 厘米

我肯定还有其他的，和有关打印CSS一个优秀的文章可以在这里找到：要打印，由埃里克·迈耶。

我还建议pt与cm或mm的比较，因为它更精确。另外，我无法让@page在Chrome（版本30.0.1599.69 m）中工作。它忽略了我为边距放置的任何内容，无论大小。但是，您可以将其与文档的页边距配合使用，很奇怪。

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