Margin / padding on pdf page header and footer

[viceice]

Hi,

i see a strange margin / padding / space when rendering a pdf header / footer which is 20px.

My header / footer has a background, so that caused it to show me the additional space,

<style>

  @page {
    margin: 0 !important;
  }
  body {
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact;
    print-color-adjust: exact;
  }


  .footer {
    font-family: 'Open Sans', sans-serif !important;
    width: 100%;
    height: 22px;
    font-size: 12px;
    color: white;
    background: #009ba5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
    /* remove strange 20px space*/
    margin-bottom: -20px;
  }
</style>
<div class="footer">
  <span>Some footer text</span>
  <span>Page <span class="pageNumber"></span> of <span class="totalPages"></span></span>
</div>

[viceice]

it seems there is some magic #footer and #header element, which has a padding. so this helps

#footer {
  padding: 0;
}

• footerTemplate and headerTemplate don't use body styles puppeteer/puppeteer#1853 (comment)