title: html/CSS code to minimize the extra spaces in the web page
body: <p>My web page have multiple tabs and each tab has some content included through html file.
  When user click on Tab1, i am displaying few boxes with image as shown in the below fiddle.
  <a href="https://plnkr.co/edit/Xs9C9eWKUYBI32hXqSWc?p=preview" rel="nofollow noreferrer">Code Demo here</a></p>
  
  <p>We can notice more space in the page before and after the boxes are displayed and there is a bar displayed with some heading, after the heading bar also lot of unused space can be seen. Please suggest how to remove those unwanted gaps before and after the boxes.I dont want to minimise the tab content displayed area.
  I tried minimizing the height, though the problem remained the same.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="tabs"&gt;
     &lt;div class="tab"&gt;
          &lt;input type="radio" id="tab-1" name="tab-group-1" checked&gt;
          &lt;label for="tab-1"&gt;Tab1&lt;/label&gt;
  
           &lt;div class="content" style="width:700px;height:700px;"&gt;
             &lt;!-- &lt;embed type="text/html" src="summary.html"&gt; --&gt;
               &lt;iframe src="tab1.html" width="100%" height="100%"&gt;&lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="tab"&gt;
          &lt;input type="radio" id="tab-2" name="tab-group-1"&gt;
          &lt;label for="tab-2"&gt;Tab2&lt;/label&gt;
          &lt;div class="content"&gt;
             &lt;iframe src="tab2.html" width="100%" height="100%"&gt;&lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tab"&gt;
          &lt;input type="radio" id="tab-3" name="tab-group-1"&gt;
          &lt;label for="tab-3"&gt;Tab3&lt;/label&gt;
          &lt;div class="content"&gt;
             &lt;iframe src="tab3.html" width="100%" height="100%"&gt;&lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>