Menu
I've got this HTML structure:
<body cz-shortcut-listen="true">
<div id="panels">
<section id="sect0" name="lvl0">
<div id="divLvel0" class="level zero">
<h2>top<nav><ul><li><a href="#sect1">Languages</a></li><li><a href="#sect2">Proficiency</a></li><li><a href="#sect3">Milestones</a></li><li><a href="#sect4">Details</a></li></ul></nav></h2>
</div>
</section>
<section id="sect1" name="lvl1">
<div id="divLvel1" class="level one">
<div id="panel_lvl1">
<h2>Languages</h2>
</div>
</div>
</section>
<section id="sect2" name="lvl2">
</section>
<section id="sect3" name="lvl3">
<div id="divLvel3" class="level three">
<div id="panel_lvl3">
<h2>Milestones</h2>
<div id="chart3">
</div>
</div>
</div>
</section>
<section id="sect4" name="lvl4">
<div id="divLvel4" class="level four">
<div id="panel_lvl4">
<h2>Details</h2>
<div id="chart4">
</div>
</div>
</div>
</section>
</div>
</body>
https://jsfiddle.net/thadeuszlay/Lkdo5xv3/2/
Every section touch each other directly, i.e. there is no additional element in between the sections. But somehow you can see a gap (the green background color) between each section.
I already set the padding and the margin of the body to zero. Also I replaced the sections with DIVs. But the gap is still there.
How do I get rid of the gap and make each section touch other without a gap between them?
898
reset padding and margin for all objects at the start of your style
* {
margin:0;
padding:0;
}
after that you can set padding and margin as you want for each object
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
