Modify the top and bottom margin of a printed HTML Page

html css printing printing-web-page
Dane picture Dane · Aug 20, 2013 · Viewed 10.5k times · Source

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

Answer

Chris Broski picture Chris Broski · Dec 3, 2016

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>

Related questions

How to make a HTML Page in A4 paper size page(s)?

Is it possible to make a HTML page behave, for example, like a A4-sized page in MS Word? Essentially, I want to be able to show the HTML page in the browser, and outline the content in the dimensions …

Read More
How to print HTML content on click of a button, but not the page?

I want to print some HTML content, when the user clicks on a button. Once the user clicks on that button, the print dialog of the browser will open, but it will not print the webpage. Instead, it will print …

Read More
Landscape printing from HTML

I have a HTML report, which needs to be printed landscape because of the many columns. It there a way to do this, without the user having to change the document settings? And what are the options amongst browsers.

Read More