5

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:

current output

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:

enter image description here

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 :)

HizkiFW
  • 9
  • 5
Alen
  • 1,221
  • 5
  • 21
  • 43
  • When you say "I do not want the extra whitespaces around the divs" Do you mean you wish to lose the borders and shadows? Do you have an example of what you would like it to look like? – UntitledGraphic Jun 11 '17 at 15:26
  • Wait for your partner, or post a minimal working code snippet that reproduce the issue. As of now we only have a screen dump and it is difficult to debug that one – Asons Jun 11 '17 at 15:26
  • Have added the desired output. I cannot wait for him, since I have a day left to submit my project – Alen Jun 11 '17 at 15:43
  • Still no _minimal working code snippet that reproduce the issue_ – Asons Jun 11 '17 at 15:54

1 Answers1

2

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.

Evan Sims
  • 93
  • 7