Extra whitespace above the header and below the footer.

Steps to reproduce

Tell us about your environment:

• Puppeteer version: puppeteer@1.13.0
• Platform / OS version: OSX 10.11
• URLs (if applicable):
• Node.js version: npm@6.8.0

What steps will reproduce the problem?

I have configured a header and footer for the site example.com and I have got the following issue.

Please include code that reproduces the issue.

1 JS code

const puppeteer = require("puppeteer");

(async () => {const browser = await puppeteer.launch({headless:true});

const page = await browser.newPage(); 
var fs = require("fs"); 

await page.goto("https://example.com/"); 

await page.pdf({path: "./output/1.pdf",

 format: "A4",

 displayHeaderFooter:true,
 
headerTemplate:"<div style=' font-size: 28px; width:100%; -webkit-print-color-adjust: exact;height:180px; min-height: 69px;overflow: auto;clear: both;border-bottom: 1px solid #ddd;background: red;' >Header</div>", 

footerTemplate:"<div style=' font-size: 28px;  width:100%; -webkit-print-color-adjust: exact;height:180px; min-height: 69px;overflow: auto;clear: both;border-bottom: 1px solid #ddd;background: red;'> Footer</div>", 

printBackground : true, 

preferCSSPageSize:false,

margin : {top: "120px", bottom : "120px"
} 
} ); 
await browser.close(); })();

What is the expected result?

The pdf with no white space above the header and below footer, with content in the footer

What happens instead?

There is an extra whitespace above the header and below the footer and added to tat the footer is also generated empty without content.

I have attached the output pdf

1.pdf

[zhm]

You have to override this style using a <style> tag in your header and footer content:

<style>#header, #footer { padding: 0 !important; }</style>

[vekunz]

Add it directly to you header or footer template:

const header = '<style>#header, #footer { padding: 0 !important; }</style><div class="header" style="padding: 0 !important; margin: 0; -webkit-print-color-adjust: exact; background-color: red; color: white; width: 100%; text-align: left; font-size: 12px;">header of Juan<br /> Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>';
const footer = '<style>#header, #footer { padding: 0 !important; }</style><div class="footer" style="padding: 0 !important; margin: 0; -webkit-print-color-adjust: exact; background-color: blue; color: white; width: 100%; text-align: right; font-size: 12px;">footer of Juan<br /> Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>';