Modify the top and bottom margin of a printed HTML Page

Question

I am looking to have a 75px margin on the top and bottom of each printed page. I have tried putting the margin on the body and a wrapper div, but both of these options just add a margin to the top and bottom of the whole document. This gives a 75px at the top of the document, then maybe 10px on the top/bottom of the second page, and the last page will have the bottom margin.

I included an image if it will help: http://imgur.com/6tbHzs4

Solution 1

The other answers are only partially correct. You should use units with a physical dimension (I prefer using pt instead of cm or mm) and you may want to use a print style sheet. But if you want to style the top and bottom margins of a printed page, you will have to also use the @page rule. You probably need something like this:

<style>
@page {
    margin: 75pt 0;
}
</style>

Solution 2

You should use cm or mm as unit (while Printing).

When you specify for printing, pixels will cause the browser to translate it to something similar to what it looks like on screen.

Use cm or mm to ensure consistent size on the paper.

body {
    margin: 0mm 25mm 25mm 0mm;
}

Comments

[Admin]

The document I am trying to print is specifically made just for printing so I do not need the page to look different in the browser than it does on a piece of paper, well besides the margins.

[Chris Broski]

This will only add margin to the beginning and end of the document, not each printed page. See me answer on using the @page rule.

[EoghanTadhg]

This is the best solution for margins on multiple pages. And the resource link is very helpful.