打印页面、隐藏页面标题/编号并添加顶部填充答案

【问题标题】：Print page, hide page title/number and add top padding打印页面、隐藏页面标题/编号并添加顶部填充
【发布时间】：2018-02-12 17:12:01
【问题描述】：

我正在开发打印 CSS。我想做的是隐藏放置在每个页面上的页面标题/编号，并为每个页面添加一些顶部填充。为了摆脱页面标题/编号，我使用 margin:0; 效果很好，但 padding-top:30px; 似乎无法正常工作。

@page { 
    size:8.5in 11in;  
    margin:0;
    padding-top:30px;
    orphans:5; 
    widows:5;
}

.page-break {
    page-break-after:always;
    margin:0!important;
    padding:0!important;
    font-size:0!important;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus interdum odio. Duis vel volutpat quam, sed feugiat diam. Fusce vulputate tellus ut leo iaculis ultrices. Sed ultrices odio ut lobortis bibendum. Vestibulum sed sodales leo. Mauris ullamcorper aliquam lorem, efficitur sagittis ex auctor a. In mattis mauris vitae diam rhoncus auctor.</p>

<p class="page-break"></p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus interdum odio. Duis vel volutpat quam, sed feugiat diam. Fusce vulputate tellus ut leo iaculis ultrices. Sed ultrices odio ut lobortis bibendum. Vestibulum sed sodales leo. Mauris ullamcorper aliquam lorem, efficitur sagittis ex auctor a. In mattis mauris vitae diam rhoncus auctor.</p>

<p class="page-break"></p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus interdum odio. Duis vel volutpat quam, sed feugiat diam. Fusce vulputate tellus ut leo iaculis ultrices. Sed ultrices odio ut lobortis bibendum. Vestibulum sed sodales leo. Mauris ullamcorper aliquam lorem, efficitur sagittis ex auctor a. In mattis mauris vitae diam rhoncus auctor.</p>

<p class="page-break"></p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus interdum odio. Duis vel volutpat quam, sed feugiat diam. Fusce vulputate tellus ut leo iaculis ultrices. Sed ultrices odio ut lobortis bibendum. Vestibulum sed sodales leo. Mauris ullamcorper aliquam lorem, efficitur sagittis ex auctor a. In mattis mauris vitae diam rhoncus auctor.</p>

<p class="page-break"></p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus interdum odio. Duis vel volutpat quam, sed feugiat diam. Fusce vulputate tellus ut leo iaculis ultrices. Sed ultrices odio ut lobortis bibendum. Vestibulum sed sodales leo. Mauris ullamcorper aliquam lorem, efficitur sagittis ex auctor a. In mattis mauris vitae diam rhoncus auctor.</p>

【问题讨论】：

标签： print-css

【解决方案1】：

为什么不使用.page-break 来执行此操作？

.page-break {
  page-break-after: always;
  margin: 0 0 30px;
  padding: 0;
  font-size: 0;
}

（为了清楚起见，我删除了!importants。你真的需要它们吗？）

【讨论】：

不幸的是，这似乎对分页符后的页面没有影响。内容仍然占据页面顶部。
我能够根据您的回答找到解决方案。我现在不使用page-break-after，而是使用page-break-before，顶部边距而不是底部边距，它可以按需要工作。谢谢！