Margin while printing HTML page

html

responsive-design

css

print-styles

byAlex Kataev·Oct 25, 2024

Quickly wipe out default print margins with the following:

@media print {
  /* So you don't fall off the page! */
  @page { margin: 0; } 
  /* Giving content some breathing space */
  body { margin: 20mm; } 
}

This CSS snippet zeroes out the page margin, then applies a 20mm margin within the body to ensure everything won't fall off the edge during print.

Let's dig a little deeper into these print-savvy strategies to create foolproof printed layouts.

Gold-standard configuration for print styling

Configuring print styles often means dealing with quirks across browsers and devices. Here's a breakdown on how to tailor effective print margins.

The global solution: @page rule

To define the paper margins during printing, the @page directive is the way to go:

/* Saying a big hello to the printer */
@page {
  /* Setting pretty global margins */
  margin: 1cm; 
}

This rule tells the printer to respect a 1cm margin on every page. Use units like cm or mm instead of pixels (they're not inherent fans of the printing world).

A closer focus:@media print

For fine-tuning the spacing of printed content, your secret weapon lies within:

@media print {
  body {
    /* Distributing decent space for rainbows & unicorns */
    margin: 15mm 10mm;
  }
}

This sets distinct horizontal and vertical margins for the body content in the print space.

When @page doesn't play nice

While @page is your best friend for print styles, not all browsers treat it the same.

For example, Internet Explorer 7 or newer versions might scale your perfect print layout. The user needs to disable this in the browser's print settings, as CSS can't help. Despite CSS's attempts to woo Safari, the @page support is quite limited there.

No worries! When @page fails, this CSS snippet breathes a sigh of relief:

@media print {
  /* Here's looking at you Chrome! */
  body { margin: 20mm; } 
}

Chrome users, this is your winning ticket when @page doesn't work.

The magic touch for long content

Got a long webpage to print? Conquer it by using page-break properties:

.division {
  /* Who needs the Infinity Gauntlet when you can rule page-breaks? */
  page-break-before: always; 
}

Keep your print layout pristine by applying different classes for distinct parts of the content.

Attention to details: height & width

Being mindful of content's height and width ensures your masterpiece fits within the specified print margins. Tweak these values to avoid an explosion of content from the page's edge.

Beyond basics with @page

If your print layout is a mini-Universe and needs extra control, let the @page rule usher in named pages:

@page WideMarginPage {
  /* Making room for wide-ranged musings */
  size: A4; 
  margin: 1cm;
}

@media print {
  .wide-section {
    /* Summoning 'WideMarginPage' for wide-section */
    page: WideMarginPage; 
  }
}