带浮动项目的两个div之间的差距

Question

I am creating a navbar with two sections, one small top one, and a bigger bottom one, which both have floated icons, however there is a small space in between them. There is only a small gap between them. I'm not sure why, any help is appreciated. I am also using bootstrap, however none of the navbar is bootstrap.

 header div.nav { background-color: #fff; } header div.top-nav { overflow: hidden; } header div.top-nav div.info { background-color: #f1f1f1; width: 100%; display: inline-block; } header div.info div.contact { float: left; } header div.top-nav div.contact a { padding: 3px 16px; display: inline-block; } header div.info div.social { float: right; } header div.top-nav div.social a { color: #333; } header div.top-nav div.social ai { padding: 8px 16px; } header div.top-nav div.social ai:hover { color: #6b6b6b; transition: 0.5s; } header div.nav div.brand { float: left; } header div.nav div.links { float: right; } header div.nav div.brand a { display: block; color: #f07e0b; text-align: center; padding: 14px 16px; text-decoration: none; } header div.nav div.brand a:hover { display: block; color: #ffc863; text-align: center; padding: 14px 16px; text-decoration: none; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } li a { display: block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } 

 <header> <div class="top-nav"> <div class="info"> <div class="container"> <div class="contact"> <a>hello@arriveradio.com</a> </div> <div class="social"> <a href="https://twitter.com/radioarrive"><i class="fa fa-twitter-square"></i></a> </div> </div> </div> </div> <div class="nav"> <div class="container"> <div class="brand"> <a>ArriveRadio</a> </div> <div class="links"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </div> </div> </div> </header> 

Answer 1

If you put a 1px border around the top nav and the bottom, you can see that the missing area is caused by the top div not filling 100% of the height of the parent.

By removing the style that sets the <div class="info"> to inline-block, you will remove this small space.

header div.top-nav div.info {
    background-color: #f1f1f1;
    width: 100%;
    /* display: inline-block; */
}

 /* header div.nav { background-color: #fff; } */ header div.top-nav { overflow: hidden; border: solid 1px; } header div.top-nav div.info { background-color: #f1f1f1; width: 100%; /* display: inline-block; */ } header div.info div.contact { float: left; } header div.top-nav div.contact a { padding: 3px 16px; display: inline-block; } header div.info div.social { float: right; } header div.top-nav div.social a { color: #333; } header div.top-nav div.social ai { padding: 8px 16px; } header div.top-nav div.social ai:hover { color: #6b6b6b; transition: 0.5s; } .nav { border: solid 1px; } header div.nav div.brand { float: left; } header div.nav div.links { float: right; } header div.nav div.brand a { display: block; color: #f07e0b; text-align: center; padding: 14px 16px; text-decoration: none; } header div.nav div.brand a:hover { display: block; color: #ffc863; text-align: center; padding: 14px 16px; text-decoration: none; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } li a { display: block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <header> <div class="top-nav"> <div class="info"> <div class="container"> <div class="contact"> <a>hello@arriveradio.com</a> </div> <div class="social"> <a href="https://twitter.com/radioarrive"><i class="fa fa-twitter-square"></i></a> </div> </div> </div> </div> <div class="nav"> <div class="container"> <div class="brand"> <a>ArriveRadio</a> </div> <div class="links"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </div> </div> </div> </header> 

Answer 2

Here is a jsfiddle: https://jsfiddle.net/45v15kjr/

header div.top-nav div.info {
    background-color: #f1f1f1;
    width: 100%;
    display: block; /* this is part of the issue */
}

Also there are a few containers that need clearfixes.