Generate a space with HTML that a printer will ignore

Question

I have some code that generates bills for multiple customers on one web page. I use the div element style="page-break-after:always" so the user can print every customers bill at once, and the bills for unique customers will all be printed on a separate sheet of paper. My issue is that I want the bills to be a little more readable on the users screen by putting some space between one bill and the next bill, but I don't want to print a bunch of white space. How can I introduce some extra space between the bills that the printer will ignore?

Answer 1

You can implement a special style sheet only for the printer and have that style ignore certain elements. Something like this would work:

<link rel="stylesheet" type="text/css" media="print" href="/css/print.css">

Then within your print.css file you can have all of your original CSS and define something like this:

.printhide{ display:none; }

Within your HTML file, all the elements you want hidden just add the printhide class to them. Eg.

<br class="printhide">

Answer 2

Use a print css. This would be a css file with print specific rules, which can be loaded with all other css files, but with a media="print" attribute to tell browsers it is intended for print.

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Answer 3

Insert a div after the bill:

<div class="bill">
...your bill goes here...
<div class="spacer"></div>
</div>

Add a print stylesheet:

<link rel="stylesheet" href="screen.css"/>
<link rel="stylesheet" href="print.css" media="print"/>

Define the space in screen.css:

div.spacer {margin-bottom:2em;}

Hide the space in print.css:

div.spacer {display:none;}