Question 214138 in Html Question posted in
Some basic documentation can be found here.

CSS Margin Causes Unwanted White Area Around Content in Multi-page HTML Print

I am working on a multi-page HTML document with CSS for printing, specifically targeting the A4 page size. The layout works fine, but the issue I’m facing is that the margin I’ve applied results in an unwanted white area around the content on each page. My goal is to remove this white area and have the background color extend to the full page, including the margin.

CSS Code:

@page {
  size: A4;
  margin: 1cm;
}

body {
  background-color: var(--bg);
}

.page {
  width: 21cm;
  min-height: 29.7cm;
}

Current Outcome:
The current output displays the content centered within an A4-sized page with a 1cm margin around it. However, this margin creates an unwanted white area around the content on each page, as seen in the following image:

Incorrect Output

Desired Outcome:
I want to achieve a printed output where the background color extends to the full page, including the margin area. This means that the white area around the content should be removed, and the background color should cover the entire page, while the content remains centered within the page.

What I’ve Tried:
I have attempted to adjust the CSS properties, including setting margins and padding, to remove the white area around the content and have the background color extend to the full page. Unfortunately, these attempts have not yielded the desired outcome.

If anyone has encountered a similar issue or knows how to achieve the desired result, I would greatly appreciate any insights or alternative approaches. Thank you in advance for your help!

Tags:

2

Answers


  1. 0

    There are quite a few reasons why printing a full-page light background color is a bad idea:

    • Many printers simply cannot print to the edge of a page.
    • Many printers are not good at printing an even light color.
    • It wastes ink. Users might not be happy about that and switch off the background anyway in their printer settings.

    So, what to do? The solution is quite easy: Set the background color to white when printing. This can be done using CSS:

    body {
  background-color: var(--bg);
}

@media print { 
  body { 
    background-color: white; 
  }
}

    This does not affect the background color when looking at your page with the browser.

    You can add in any other CSS rule you need. See: @media.

    EDIT: Added the normal body rule to show that the @media rule should come after it.

    Login or Signup to reply.
  2. 0

    modified css file:

        body {
      /* Set the background color directly on the body element */
      background-color: var(--bg);
    
      /* Use box-shadow to create a colored "border" around the content */
      box-shadow: 0 0 0 100vmax var(--bg);
    }

.page {
  width: 21cm;
  min-height: 29.7cm;
  /* Center the content within the page */
  margin: 0 auto;
}

    by using box-shadow property you can avoid unwanted white.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search