Issue with margins when print to PDF

I have a strange issue with page margins when printing to PDF. And it’s most likely Chrome issue.

What steps will reproduce the problem? Just build PDF via Puppeteer: await page.pdf({ path: pdfPath, format: 'A4' });

This issue is also reproduced when you are in Chrome in Print Preview (Ctrl + P).

Case 1: I have a CSS with these styles:

    @page { margin: 3cm 0 2cm; }

Some text is not shown because of margins, it’s like under it (lines 13 and 14 missed).

Case 2: But when I set margins to 0 everything is OK:

    @page { margin: 0; }

Case 3 When I’m in Chrome’s Print Preview and set Custom Margins (the same 3cm at top and 2 cm at bottom) everything is OK and text is not cut.

What is the expected result? Text should be moved to next page as in case 3.

What happens instead? Text is not shown as it is under margins. (see case 1).

Please advise how to fix that.

[initialapps]

I struggled with this for awhile and finally got this to work by setting a smaller page size, while setting the margin to zero. @page { size:8in 10in; margin: 0; }

Revisiting this a year and a half later… My prior answer was wrong. I had a lot of competing CSS margins that were making things messy.

After cleaning that up, I simply specified page size and margins in inches and it worked:

@page {
        size: 8.5in 11in; 
        margin: 0.5in;
}

[pantekx3]

At last, I found out what is the cause of the issue in my case - it was margin-bottom for the first page:

@page:first {
    margin-bottom: 0; 
}

After removing it - everything is OK. @IpShot hope it will also help you if you have similar margin styles 😃 Thanks everybody!