Change the top and bottom margins of the printed HTML page

Question

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

I included the image if that helps: http://imgur.com/6tbHzs4

Answer 1

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

When you point to print, the pixels force the browser to translate it into something similar to how it looks on the screen.

Use cm or mm to ensure consistent paper size.

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

Answer 2

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

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

Answer 3

Add a media type to your CSS

 <style> div { font-family: arial; font-size: 10px; margin: 10px 10px; } </style> <style media="print"> // CSS here will only be applied when printing div { margin: 5px 5px; } </style> 

Your html will have all the css as above, but changed the field values