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

问题

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

回答1:

Please try this:

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

回答2:

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; // 
  }
}