How to Set Margins for Printing an HTML Page?

How to Set Margins while Printing an HTML Page

When using a separate style-sheet for printing, it's crucial to adjust the margins for optimal presentation on paper. However, it's not always clear how to set the margins correctly in the style-sheet. To ensure consistent margins, it's essential to use absolute units like centimeters (cm) or millimeters (mm) when specifying for printing.

For instance, to set a margin of 25mm on all sides of the document:

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

Note that using pixels for margins can lead to inconsistencies since browsers translate them to screen-based values.

For font sizes, use points (pt) in the print media.

It's important to note that setting margins on the body element in CSS style does not affect the margins controlled by the printer driver or browser. It adjusts the margin on the document within the printable area.

For complete control over printed margins, use the @page directive to set the paper margin. This affects the margin outside the HTML body element and is typically controlled by the browser.

Here's an example using the @page directive:

@page {
    size: auto;
    margin: 25mm 25mm 25mm 25mm;
}

body {
    margin: 0px;
}

This technique works in all major browsers except Safari. In Internet Explorer, users can adjust the margins in the print preview settings.

Additionally, note that IE7 automatically adjusts the print size to fit the page, which can disrupt the configured margins. Users must set the print size to 100% in print preview to override this behavior.

The above is the detailed content of How to Set Margins for Printing an HTML Page?. For more information, please follow other related articles on the PHP Chinese website!