how to print whole HTML page as A4

Question

I have taken a template from w3-schools, did some research, and tried this by looking into this question:

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

I inserted this print code

<script>
  $(document).ready(function()
  {
    window.print();
  });
</script>

And got this result:

But this is not I want. I do not want the extra whitespaces around the divs. It should be printed as an A4 page, like this:

What should I do to achieve this?

PS: Before unleashing frustration, I am a pure backend developer. My partner, who is a front-end dev, is sick for days. Sorry and thank you :)

Answer 1

Try tweaking those margin values in the CSS snippet you used. Start from:

@page {
  size: 7in 9.25in;
  margin: 0mm 0mm 0mm 0mm;
}

… and increase those "0mm" values until you're happy, i.e. 1mm, 2mm, etc.

Those 4 values (all currently 0mm in my example) represent the top margin, right margin, bottom margin and left margin of the printed page, in order.

So if you only want to increase the margin from the bottom of the page, you'd change the third 0mm in that line.