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?

Solution 1

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.

Solution 2

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.

Comments

[thirtydot]

Yes, but you can't touch it from your web page. Look in the browser's "print settings".

[Jacob Thomason]

"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.