我正在使用单独的样式表进行打印。
在设置打印页边距的样式表中，是否可以设置右侧和左侧边距？（即纸张上的边距）
7个回答
302
打印时，应使用cm或mm作为单位进行指定。如果使用像素，则会导致浏览器将其转换成类似于屏幕上的外观。使用cm或mm将确保打印该元素时大小始终一致。
body
{
margin: 25mm 25mm 25mm 25mm;
}
在打印媒体中，使用pt来设置字体大小。
请注意，在css样式中设置body的margin不会调整定义打印区域的打印机驱动程序或由浏览器控制的边距（在某些浏览器中可以在打印预览中进行调整）...它只会在可打印区域内设置文档的margin。
您还应该知道，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;
}
- awe
8
77
首先，我尝试强制所有用户在打印时使用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;
}
}
特殊情况：长表格
当我需要打印一个跨越多个页面的表格时，使用@page和margin:0会导致出现出血边缘：
我能够通过这个答案解决这个问题：
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
1
4当使用ERPNext打印报告时，您的解决方案非常有价值。我能够轻松开发自己的自定义打印格式，并且这些提示非常有帮助！ - Tropicalrambler
12
更新的、简单的解决方案
@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>
- Pir Abdul
2
这在Chrome或FF上对我没有用。另外，
class=Section1应该改为class="Section1"。 - nu everest这是一个更简单的解决方案：https://dev59.com/CJbfa4cB1Zd3GeqPx76h?answertab=active#tab-top - besimple
9
我个人建议使用与
px不同的度量单位，因为我认为像素在打印方面并没有太多的相关性；理想情况下您应该使用：
- 点（pt）
- 厘米（cm）
- David Thomas
1
1你说得对，
px 对于打印来说并没有太多的相关性。但是浏览器会将像素单位“翻译”成屏幕上的显示效果类似的样子。它不会使用“打印机分辨率点”作为像素（感谢上帝……）。 - awe2
我建议使用pt而不是cm或mm，因为它更精确。
此外，我无法在Chrome（版本30.0.1599.69 m）中使@page起作用。它会忽略我设置的任何边距大小。但是，您可以通过文档的body边距使其起作用，很奇怪。
- ironarm
1
您可以尝试使用顶部负边距来实现此操作。
@media print {
@page {
/* size: 210mm 297mm; */
margin: -110mm 16mm 27mm 16mm;
}
}
- Salis Khizar Khan
0
如果您知道目标纸张大小，可以将内容放置在具有该特定大小的DIV中，并向该DIV添加边距以模拟打印边距。 不幸的是，我认为除了显示打印对话框外，您没有额外的控制打印功能。
- jonjbar
2
谢谢。无论纸张尺寸如何，是否不可能指定在左右两侧留下x像素。问候 - kobra
1如果将父级DIV的大小设置为100％并添加x像素的边距，则我猜这可能是可能的。 - jonjbar
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
<body class="firefox">，因此在CSS中您可以使用body.firefox {margin: 0mm; padding: 0.25in;}，实际上是0.75英寸的边距，因为Firefox已经添加了0.5英寸。 只要您需要>= 0.5英寸的边距，这应该可以使用。 - MrFusion