CSS print a custom sized page margin when the content is on multiple pages

Question

I'm trying to print an HTML page that might be long and contain text paragraphs and tables. My goal is to define a print margin for every page. I added the following CSS to my page:

@media print {
    body {
        margin: 2.5cm 0;
    }
}

But the problem that I have is that the margin gets added only to the beginning and end of the document and NOT to every single page. As you can see from the attached image I have a margin top in the first page but not in the second one, my desired behavior is something similar to a book or a word document (where you define page margins). Is it possible to do it in CSS?

issue visibile in the print preview screen

Answer 1

CSS for Printed Page Margins

@page {
  margin: 1in; // margin for each printed piece of paper
}

@page :first {
  margin-top: 2in; // top margin for first page of paper
}

@media print {
  body {
    margin: 0; // 
  }
}

---

Print Dialog Settings

In the print preview dialog, ensure that "Margins" is set to "Default".

If "Margins" are set to "None" (or other non-"Default" option) the @page settings will be ignored.

Browser Support

@page is not supported in all browsers. Learn more about @page.

Answer 2

Please try this:

@media print {
   body {
   display:table;
   table-layout:fixed;
   padding-top:2.5cm;
   padding-bottom:2.5cm;
   height:auto;
    }
}