Can I Set Print Margins for HTML Pages Using CSS?

Setting Margins When Printing HTML Pages

When printing HTML pages, you may need to adjust the left and right margins to ensure the printout conforms to the margins defined by your printer.

Is it possible to set print margins in a CSS style sheet?

Yes, you can set page margins using cm or mm units in your CSS style sheet. For example:

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

Using cm or mm ensures consistent margin sizes on paper, regardless of screen resolution.

Additional Considerations:

• Font Sizes: Use the "pt" unit for font sizes in print media.
• Browser Margin Adjustments: Browser margin settings (controlled by the browser or print driver) may override CSS margins. You can disable browser print options like headers, footers, and margins using @page directives.
• Internet Explorer Adjustments: IE7 and later automatically adjust margins to fit content. To override this, set the print size to 100% in print preview.
• @page Directive: Use the @page directive to set margins outside the HTML body element, affecting the paper margin itself. However, this directive may not work in Safari.

Example Using body and @page Directives:

<code class="css">body {
  margin: 0px;  /* Margin for content within the HTML body */
}

@page {
  size: auto;
  margin: 25mm 25mm 25mm 25mm;  /* Margin for paper outside the body */
}</code>

The above is the detailed content of Can I Set Print Margins for HTML Pages Using CSS?. For more information, please follow other related articles on the PHP Chinese website!