Set margin/padding for each page to print (html/css)?

Question

I've a lot of contents on page which i don't have control of where it breaks. And I've placed some contents using position:fixed on each page as header/footer but it overlap with text. I tried to solve the overlapping using margin and padding in following two ways.

When i added margin using @page

@page {
    margin: 2cm;
}

It works on every page as it says, but my header and footer also taken away from margin.

So I tried to adding margin using body tag

body {
    margin: 2cm;
    /* padding: 2cm; */
}

it work by adding 2cm top margin on first page and 2cm bottom margin on last page. But not in between pages.

Is it possible to set margin/padding each page?

i'm not sure i understand the problem,but have you tried this? @page { padding: 2cm; } — theboy, Jan 21 '17 at 10:39

Muhammad Musavi · Answer 1 · 2022-03-02T08:53:12.320

I encountered exactly the same problem and after searching a lot I found an interesting article offering a combinative solution which you can read here.

In short it combines two methods:

Using position: fixed technique
Using thead tbody tfoot

If you only use the first method you will face the overlapping issue, in the same way if you only use the second method, footer will stick to the bottom of the content of page which might ended in the beginng of the last page, but combination of both methods resolves the problem.

.page-header, .page-header-space {
  height: 100px;
}

.page-footer, .page-footer-space {
  height: 50px;

}

.page-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid black; /* for demo */
  background: yellow; /* for demo */
}

.page-footer:after {
  counter-increment: page;
  content: counter(page)
}

.page-header {
  position: fixed;
  top: 0mm;
  width: 100%;
  border-bottom: 1px solid black; /* for demo */
  background: yellow; /* for demo */
}

.page {
  page-break-after: always;
}

@page {
  margin: 20mm
}

@media print {
   thead {display: table-header-group;} 
   tfoot {display: table-footer-group;}
   
   button {display: none;}
   
   body {margin: 0;}
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
</head>

<body>

  <div class="page-header" style="text-align: center">
    I'm The Header
    <br/>
    <button type="button" onClick="window.print()" style="background: pink">
      PRINT ME!
    </button>
  </div>

  <div class="page-footer">
    I'm The Footer, Page #
  </div>

  <table>

    <thead>
      <tr>
        <td>
          <!--place holder for the fixed-position header-->
          <div class="page-header-space"></div>
        </td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>
          <!--*** CONTENT GOES HERE ***-->
          <div class="page">PAGE 1</div>
          <div class="page">PAGE 2</div>
          <div class="page" style="line-height: 3;">
            PAGE 3 - Long Content
            <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
            mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
            pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
            suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
            Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
            lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
            pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
            mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
            sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
            justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
            fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
            nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
            Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
            Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.
          </div>
        </td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>
          <!--place holder for the fixed-position footer-->
          <div class="page-footer-space"></div>
        </td>
      </tr>
    </tfoot>

  </table>

</body>

</html>

Here you can see a working demo.

To make sure this solution works properly, try to print it by pressing Print Me! button.

You might even need to have page number in the footer, it's done by CSS too, you only need to add following CSS:

.page-footer:after {
    counter-increment: page;
    content: counter(page)
}

In some articles it's content: counter(page) " of " counter(pages);, but in my case pages returns 0 all the time for no reason, so I ignored it, maybe you can achieve the count of total pages by using CSS var().

For the record if you'd like not to observe the header and footer before printing you can add following CSS:

@media screen {
    .header, .footer {
        display: none;
    }
}

Update 2020:

It seems page number doesn't work anymore.

I've tried this on the third page, it's content is not properly settled into the third and fourth page — Vipertecpro, Mar 31 '20 at 03:28

score 10 · Answer 2 · answered Jan 21 '17 at 13:24

10

Your first option was correct, what you need to do is just position your header and footer as running.

@page {
    margin: 2cm;

    @top-center {
        content: element(pageHeader);
    }

    @bottom-center {
        content: element(pageFooter);
    }
}

#pageHeader{
    position: running(pageHeader);
}

#pageFooter{
    position: running(pageFooter);
}

answered Jan 21 '17 at 13:24

Serg Chernata

12,280
6
32
50

1

Is this supported by major browsers? – Oriol Jan 21 '17 at 21:22
4

@page itself doesn't seem to be supported by safari: https://developer.mozilla.org/en-US/docs/Web/CSS/@page – Serg Chernata Jan 21 '17 at 21:25
2

@Oriol, no this isn't supported by major browsers and is still a draft standard. It is supported by some dedicated HTML to PDF software out there. – Jared Thirsk Jun 21 '19 at 07:20

score -4 · Answer 3 · edited Feb 02 '18 at 15:20

-4

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

edited Feb 02 '18 at 15:20

Nitish

13,845
28
135
263

answered Jan 21 '17 at 13:36

Johnny Johannine

3
2

1

`padding` is not allowed in `@page` rules (sadly). – Simon Hänisch Aug 16 '19 at 22:55

score -6 · Answer 4 · answered Jan 21 '17 at 13:51

Try this...

Be sure to have a stylesheet assigned for printing. It could be a separate stylesheet or you can use bootstrap stylesheet:

<link rel="stylesheet" type="text/css" media="print" href="print.css">

or

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute

Then, you can write your styles for printers in the separate stylesheet or in the shared one using media queries as:

@media print {
/* Your styles here */

}

Set margin/padding for each page to print (html/css)?

4 Answers4

Linked

Related