html - 带有 float 项的两个 div 之间的间隙

Question

我正在创建一个包含两个部分的导航栏，一个小的顶部部分和一个较大的底部部分，它们都有 float 图标，但是它们之间有一个小空间。他们之间只有很小的差距。我不确定为什么，任何帮助表示赞赏。我也在使用 Bootstrap ，但是导航栏都不是 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 a i {
  padding: 8px 16px;
}

header div.top-nav div.social a i: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

如果你在顶部导航栏和底部放置一个 1px 的边框，你可以看到缺少区域是由于顶部 div 没有填充父级高度的 100%。

通过删除设置 <div class="info"> 的样式到内联 block ，你将删除这个小空间。

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 a i {
    padding: 8px 16px;
}

header div.top-nav div.social a i: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>