How to Remove Gaps between HTML Elements while printing

Question

The HTML file attached here is working fine when viewed in browser but when I try to print it, there is a lot of gap between the Element such that each div is going on it's own page. how can I remove those gaps while printing?

the code : code the hosted site : sitelink

You can check the problem by going into sitelink mentioned above and pressing ctrl + p.

Answer 1

Sir Plz check this answer on that page. It would help you how can we remove space between HTML elements. In this article, everything is provided in enter link description here

you can solve problem buy adding small css property

font-size: 0;

Answer 2

You can Add float:left; in your css classes:

<style type="text/css"> 
  div.nospace {
      margin: 0;
      display: inline-block;
      float: left;
  }
</style>

When creating your div, use class="nospace"

<div class="nospace">first div</div>
<div class="nospace">second div</div>