How to remove space between ul and div in css - html

Question

I have a problem with unwanted gap between ul and div. Maybe you know solution?
#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-size: 0;
}
#tabs li {
display: inline-block;
margin: 0 .5em 0 0;
}
#tabs a {
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
font-size: 16px;
}
#content {
background: #fff;
padding: 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
width: 1100px;
margin-left: auto;
margin-right: auto;
}
<ul id="tabs">
<li>First</li>
<li>Second</li>
<li>Random</li>
</ul>
<div id="content">
<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3">...</div>
</div>
This problem occurred after inline-block adding. I searched for solutions, but what I have found that was for horizontal gaps (I have fixed it by adding font-size: 0; in parent tab). Maybe there is some solution for vertical gaps?

Answer 1

in #content add float:left; margin-top:0;

Answer 2

Remove the font-size:0
and edit margin to this
#tabs li {
margin: 0 0;
}
you gave it 0.5em which is causing the space between them
Hope it helps

Answer 3

You added padding to the content div which caused this effect
Here's a fiddle where I changed the padding to 0 2em instead
https://jsfiddle.net/6r0x3n0e/
#content {
background: #fff;
padding: 0 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
width: 1100px;
margin-left: auto;
margin-right: auto;
}
Hope this helps

Answer 4

Set padding to the following: padding:0em 2em 2em 2em;
#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-size: 0;
}
#tabs li {
display: inline-block;
margin: 0 .5em 0 0;
}
#tabs a {
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
font-size: 16px;
}
#content {
background: #fff;
padding: 0em 2em 2em 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
width: 1100px;
margin-left: auto;
margin-right: auto;
}
<ul id="tabs">
<li>First</li>
<li>Second</li>
<li>Random</li>
</ul>
<div id="content">
<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3">...</div>
</div>