Page Margins for printing in CSS

Question

I searched a lot before asking here, but didn't find an answer for my question.

I want to insert top and bottom margin for my website page when printed, so I used the normal margin-top and margin-bottom for the printed div but it affected on the first sheet only! so I used this as explained in W3C CSS2.1 Specifiction:

@page {
    margin-top: 5cm;
    margin-bottom: 5cm;
}

but no effect in Firefox Print Preview or Print to PDF. so how can I insert top and bottom margin (for each printed sheet) via CSS? or is there any trick to do this in Firefox?

Similar to [CSS page headers - how to use print margins?](http://stackoverflow.com/questions/4347992/css-page-headers-how-to-use-print-margins). This feature is not well supported. — Josh Lee, Feb 17 '11 at 03:13
I red it before, so I said: is there any trick to do this in firefox? — Anass Ahmed, Feb 17 '11 at 09:12

score 28 · Accepted Answer · answered Jul 30 '15 at 20:01

28

Both

 @page {
    margin-top: 5cm;
    margin-bottom: 5cm;
 }

and

@media print {
     body {margin-top: 50mm; margin-bottom: 50mm; 
           margin-left: 0mm; margin-right: 0mm}
}

work fine in Firefox 35

answered Jul 30 '15 at 20:01

z--

2,186
17
33

6

The second example will not add margins on every page if you print multiple pages. The first one is the correct solution. – Marko Knöbl Oct 16 '20 at 09:08
The first one doesn't work on safari though. – Caveman Oct 25 '21 at 15:08

score 3 · Answer 2 · answered May 23 '13 at 14:16

3

This should work even in firefox

 @media print {
     #main{margin:100px 0;}
 }

The "@media print" will make sure the style is only used when printing.

answered May 23 '13 at 14:16

jansmolders86

5,449
8
37
51

Page Margins for printing in CSS

2 Answers2