打印页面、隐藏页面 title/number 并添加顶部填充

Question

我正在印刷 CSS。我想做的是隐藏放在每个页面上的页面 title/number，并向每个页面添加一些顶部填充。要删除页面 title/number，我使用的是 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>

Answer 1

为什么不使用 .page-break 来做到这一点？

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

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

打印页面、隐藏页面 title/number 并添加顶部填充

Print page, hide page title/number and add top padding

print-css