为要打印的每个页面设置页边距/填充（html/css）？

我有很多页面上的内容，我无法控制它在哪里破坏。我已经在每个页面上使用position:fixed作为页眉/页脚放置了一些内容，但它与文本重叠。我尝试用以下两种方法解决使用边距和填充的重叠问题。为要打印的每个页面设置页边距/填充（html/css）？

当我将保证金使用@page

@page { 
    margin: 2cm; 
}

它的工作原理在每一页上，因为它说，但我的页眉和页脚也取自利润率远。

于是，我就加入保证金使用body标签

body { 
    margin: 2cm; 
    /* padding: 2cm; */ 
}

它的工作的第一页和最后2厘米页底部边缘上加入2厘米上边距。但不在页面之间。

是否可以设置边距/填充每页？

来源

2017-01-21 user2274195

我不知道我理解的问题，但甲肝你试过这个吗？ @page {padding：2cm; } – theboy

您的第一个选择是正确的，您需要做的只是将您的页眉和页脚定位为running。

@page { 
    margin: 2cm; 

    @top-center { 
     content: element(pageHeader); 
    } 

    @bottom-center { 
     content: element(pageFooter); 
    } 
} 

#pageHeader{ 
    position: running(pageHeader); 
} 

#pageFooter{ 
    position: running(pageFooter); 
}

来源

2017-01-21 13:24:25

这是由主流浏览器支持吗？ – Oriol

@page本身似乎并未得到safari的支持：https：//developer.mozilla.org/en-US/docs/Web/CSS/@page –

@page { 
    padding: 2cm; 
    margin: 3cm;  
}

来源

2017-01-21 13:36:15

-1

尝试......

确保有指定打印样式表。这可能是一个单独的样式表，或者您可以使用引导样式表：

<link rel="stylesheet" type="text/css" media="print" href="print.css">

或

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute

然后，你可以写你的风格在单独的样式表或使用媒体查询共享一个打印机如：

@media print { 
/* Your styles here */

}

来源

2017-01-21 13:51:21

为要打印的每个页面设置页边距/填充（html/css）？

回答

相关问题