Question

我正在开发一个打印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>

Answer 1

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

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

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

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

1 个答案: