How to Control Margins in HTML Printing Using a Separate Stylesheet?

Margin Control in HTML Printing

When customizing the print layout of an HTML page, it is essential to control the margins to ensure proper formatting on paper. This question explores setting right and left margins using a separate style sheet designated for printing.

To achieve accurate margin control while printing, it is crucial to use absolute units like centimeters (cm) or millimeters (mm). Pixels, on the other hand, can result in inconsistent margins due to browser interpretation. Therefore, specifying margins as follows ensures consistency:

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

Similarly, for font sizes, it is advisable to use points (pt) for print media.

It is important to note that setting margins using CSS does not alter the printer driver's margin settings or the browser's controlled margins. Instead, it adjusts the margins within the printable area of the document.

For greater flexibility in defining paper margins, consider using the @page directive. This approach affects the margins outside the HTML body element, allowing for precise control of the printed output. Here's an example:

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

body {
  margin: 0px;
}</code>

However, it is worth mentioning that older versions of Internet Explorer may automatically adjust print sizes, potentially disrupting margin settings. To prevent this, users should specify the print size as 100% in the print preview.

The above is the detailed content of How to Control Margins in HTML Printing Using a Separate Stylesheet?. For more information, please follow other related articles on the PHP Chinese website!