Html 打印html页面时的边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1542320/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Margin while printing html page
提问by kobra
I am using a separate style-sheet for printing. Is it possible to set right and left margin in the style-sheet which set the print margin (i.e. margin on paper).
我使用单独的样式表进行打印。是否可以在设置打印边距（即纸上边距）的样式表中设置左右边距。
Thanks.
谢谢。
回答by awe
You should use cmor mmas unit when you specify for printing. Using pixels will cause the browser to translate it to something similar to what it looks like on screen. Using cmor mmwill ensure consistent size on the paper.
指定打印时应使用cm或mm作为单位。使用像素会导致浏览器将其转换为与屏幕上看起来类似的内容。使用cm或mm将确保纸张尺寸一致。
body
{
margin: 25mm 25mm 25mm 25mm;
}
For font sizes, use ptfor the print media.
对于字体大小，请使用pt打印介质。
Note that setting the margin on the body in css style will notadjust the margin in the printer driver that defines the printable area of the printer, or margin controlled by the browser (may be adjustable in print preview on some browsers)... It will just set margin on the document inside the printable area.
请注意，在 css 样式中设置 body 上的边距不会在定义打印机可打印区域的打印机驱动程序中调整边距，或由浏览器控制的边距（可能在某些浏览器的打印预览中可以调整）......它只会在可打印区域内的文档上设置边距。
You should also be aware that IE7++ automatically adjusts the size to best fit, and causes everything to be wrong even if you use cmor mm. To override this behaviour, the user must select 'Print preview' and then set the print size to 100%(default is Shrink To Fit).
您还应该知道 IE7++ 会自动调整大小以使其最适合，并且即使您使用cm或也会导致一切错误mm。要覆盖此行为，用户必须选择“打印预览”，然后将打印尺寸设置为100%（默认为Shrink To Fit）。
A better option for full control on printed margins is to use the @pagedirective to set the paper margin, which will affect the margin on paper outside the html body element, which is normally controlled by the browser. See http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.
This currently works in all major browsers except Safari.
In Internet explorer, the margin is actually set to this value in the settings for this printing, and if you do Preview you will get this as default, but the user can change it in the preview.
完全控制打印边距的更好选择是使用@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;
}
Related answer: Disabling browser print options (headers, footers, margins) from page?
相关答案： 从页面禁用浏览器打印选项（页眉、页脚、页边距）？
回答by Kai Noack
Firstly said, I try to force all my users to use Chrome when printing because other browsers create different layouts.
首先说，我尝试强制所有用户在打印时使用 Chrome，因为其他浏览器会创建不同的布局。
An answer from this questionrecommends:
这个问题的答案建议：
@page {
size: 210mm 297mm;
/* Chrome sets own margins, we change these printer settings */
margin: 27mm 16mm 27mm 16mm;
}
However, I ended up using this CSS for all my pages to be printed:
但是，我最终将这个 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;
}
}
Special case: Long Tables
特殊情况：长表
When I needed to print a table over several pages, the margin:0with the @pagewas leading to bleeding edges:
当我需要在多个页面上打印的表格中，margin:0与@page是导致出血的边缘：
I could solve this thanks to this answerwith:
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }
Plus setting the top-bottom-margins for @page:
加上设置上下边距@page：
@page {
size: auto;
margin: 20mm 0 10mm 0;
}
body {
margin:0;
padding:0;
}
Result:
结果：
I would rather prefer a solution that is concise and works with all browser. For now, I hope the information above can help some developers with similar issues.
我更喜欢简洁且适用于所有浏览器的解决方案。目前，我希望以上信息可以帮助一些遇到类似问题的开发人员。
回答by Pir Abdul
Updated, Simple Solution
更新、简单的解决方案
@media print {
body {
display: table;
table-layout: fixed;
padding-top: 2.5cm;
padding-bottom: 2.5cm;
height: auto;
}
}
Old Solution
旧解决方案
Create section with each page, and use the below code to adjust margins, height and width.
为每个页面创建部分，并使用以下代码调整边距、高度和宽度。
If you are printing A4 size.
如果您打印 A4 尺寸。
Then user
然后用户
Size : 8.27in and 11.69 inches
尺寸：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;
}
then create a div with all your content in it.
然后创建一个包含所有内容的 div。
<div class="Section1">
type your content here...
</div>
回答by David says reinstate Monica
I'd personally suggest using a different unit of measurement than px. I don't think that pixels have much relevance in terms of print; ideally you'd use:
我个人建议使用与px. 我认为像素在印刷方面没有太大的相关性；理想情况下，您会使用：
- point (pt)
- centimetre (cm)
- 点 (pt)
- 厘米 (cm)
I'm sure there are others, and one excellent article about print-css can be found here: Going to Print, by Eric Meyer.
我敢肯定还有其他的，可以在这里找到一篇关于 print-css 的优秀文章：Going to Print，作者Eric Meyer。
回答by ironarm
I also recommend pt versus cm or mm as it's more precise. Also, I cannot get @page to work in Chrome (version 30.0.1599.69 m) It ignores anything I put for the margins, large or small. But, you can get it to work with body margins on the document, weird.
我还推荐 pt 与 cm 或 mm，因为它更精确。此外，我无法让 @page 在 Chrome（版本 30.0.1599.69 m）中工作，它会忽略我为边距设置的任何内容，无论大小。但是，您可以让它与文档上的正文边距一起使用，这很奇怪。
回答by jonjbar
If you know the target paper size, you can place your content in a DIV with that specific size and add a margin to that DIV to simulate the print margin. Unfortunately, I don't believe you have extra control over the print functionality apart from just show the print dialog box.
如果您知道目标纸张尺寸，您可以将您的内容放置在具有该特定尺寸的 DIV 中，并向该 DIV 添加边距以模拟打印边距。不幸的是，我认为除了显示打印对话框之外，您对打印功能没有额外的控制权。
