Can You Specify Print Margins Within a CSS Style Sheet?

Customizing Page Margins for Printing HTML Pages

When printing HTML pages, you may encounter the need to adjust the page margins to ensure optimal print results. While using a separate style sheet for printing is common practice, a question arises: can you specify print margins within this style sheet to control the margins on the printed document?

The answer lies in using specific units when defining margins for printing. To ensure consistent sizing on paper, you should employ centimeters (cm) or millimeters (mm) instead of pixels. For instance, the following CSS code will set margins of 25mm on all sides:

<code class="css">body {
  margin: 25mm 25mm 25mm 25mm;
}</code>

However, it's crucial to note that setting margins in the CSS style does not modify the printer driver's margins or those controlled by the browser. It solely defines margins within the printable area of the document.

Internet Explorer 7 and later automatically adjust font size to fit the page, which can disrupt print margins. To override this behavior, remind users to select "Print preview" and adjust the print size to 100%.

For greater control over printed margins, consider using the @page directive. This directive affects the margin on paper outside the HTML body element, which is typically controlled by the browser. The following code demonstrates its use:

<code class="css">@page { 
    margin: 25mm 25mm 25mm 25mm;  
} </code>

This directive currently works in all major browsers except Safari. In Internet Explorer, the margin is initially set to this value in print settings, but users can modify it in the preview.

The above is the detailed content of Can You Specify Print Margins Within a CSS Style Sheet?. For more information, please follow other related articles on the PHP Chinese website!