css print styling

Question

I have a page which displays fine on the screen.

I have a css which then formats the screen for print and re-sizes the sections.

My problem is that the print layout has a margin of approximately an inch from the left of the page which makes 2 elements print off the page on the right hand side.

I could probably compress the contents from the right but I want to know if I can reduce the margin on the left (and basically center the contents)

I have set the body tag on print to margin:0; padding: 0; but this has no effect?

Is there another setting that controls print margins?

Yes, but you can't touch it from your web page. Look in the browser's "print settings". — thirtydot, Aug 16 '11 at 23:37

score 23 · Accepted Answer · answered Aug 17 '11 at 04:50

23

You can set the print margin (and landscape orientation) with CSS like:

@media print {
    @page {
        size: letter landscape;
        margin: 4.0cm;
    }
}

And the good news is, it works! (On Chrome. Not supported on other browsers though I did not test IE9.)

The margin must be in a unit that makes sense in print -- pixels are not allowed.

Chrome will not shrink the margin below a fixed minimum, which may be determined by the printer driver.

answered Aug 17 '11 at 04:50

Brock Adams

90,639
22
233
295

1

"The margin must be in a unit that makes sense in print -- pixels are not allowed." This. ``margin: 0`` wasn't working here. ``margin: 0in`` does. – Jacob Thomason Mar 23 '17 at 22:38

score 1 · Answer 2 · answered Aug 17 '11 at 00:08

1

You could also try to set

margin:0; and padding:0;

to the html, main content div and p tags

and see if that helps.

Otherwise, your best bet is to set a specific width on your elements.

answered Aug 17 '11 at 00:08

Jason Gennaro

34,535
8
65
86

css print styling

2 Answers2

Linked

Related