On my website, there are multiple tabs, each containing content from an HTML file. When a user clicks on Tab1, boxes with images are displayed. The layout can be seen in the following Code Demo: Code Demo here
There seems to be extra space before and after the boxes are displayed, as well as a bar with a heading that takes up unnecessary room. How can I remove these gaps without minimizing the tab content area? Even after trying to reduce the height, the issue persists.
HTML code:
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab1</label>
<div class="content" style="width:700px;height:700px;">
<!-- <embed type="text/html" src="summary.html"> -->
<iframe src="tab1.html" width="100%" height="100%"></iframe>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab2</label>
<div class="content">
<iframe src="tab2.html" width="100%" height="100%"></iframe>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab3</label>
<div class="content">
<iframe src="tab3.html" width="100%" height="100%"></iframe>
</div>
</div>
</div>