Could someone shed light on the reason behind the minor gap between the top navigation element and the content div underneath it in this jsfiddle?
When I float the navigation list items, a slight gap appears between the top navigation element and the main content below it. However, if I change the navigation items to inline blocks, the gap disappears. This behavior is unexpected as floated items are meant to be taken out of the page flow and shouldn't affect the position of other elements. I've checked Chrome Dev Tools but couldn't find any explanation for this issue.
Thank you.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Header Gap Problem</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../reset.css" />
<link rel="stylesheet" href="base.css" />
</head>
<body>
<div class="wrapper">
<nav class="nav" role="navigation">
<li class="nav-item">Members</li>
<li class="nav-item">Events</li>
</nav>
<div class="content-main">
Main content
</div>
</div>
</body>
</html>
CSS
body {
-mox-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
margin: 0 auto;
}
.nav {
position: relative;
display: inline-block;
width: 100%;
background: #34495e;
}
.nav-item {
float: left;
/*
display: inline-block;
*/
padding: 1em;
color: #fff;
text-decoration: none;
}
.content-main {
padding: 1em;
background: #cf6;
}