print-css

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

I am working on a print CSS. What I would like to do is hide the page title/number that gets put on each page, and add some top padding to each page. To get rid of the page title/number I am using margin:0; which works well, but the padding-top:30px; doesn't seem to be working correctly.

@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>

Solution

  • Why not use the .page-break to do this?

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

    (I removed the !importants for clarity. Do you really need them?)