导航栏和 div 之间不需要的空间（红色）答案

【问题标题】：unwanted space between navigation bar and div(red color)导航栏和 div 之间不需要的空间（红色）
【发布时间】：2015-05-11 17:22:47
【问题描述】：

我在红色 div 和标题之间得到了一个不需要的空间我的 html 是我为 html 和 body 的边距和填充提供了 0 值。但是仍然有问题请帮助

 <header>

    <nav role="navigation" class="navbar navbar-fixed navbar-inverse">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle nav-button">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Example</a>
    </div>

    <!-- Collection of nav links and other content for toggling -->

    <div id="navbarCollapse" class="collapse navbar-collapse">

        <ul class="nav navbar-nav nav-ul">

           <li id="tech" class="nav-list">         <a href="#">home</a></li>
           <li id="politics" class="nav-list">     <a href="#">careers</a></li>
           <li id="crime" class="nav-list">        <a href="#">about</a></li>
           <li id="business" class="nav-list">     <a href="#">contact</a></li>


        </ul>

    </div>

    </nav>

</header>

<section class="frontpage">
    <div class="container">
        <div class="row">
              <div class="col-md-5">

              </div>

        </div> 
    </div>
</section>
<section class="ghi">
    <div class="container">
        <div class="row">
              <div class="col-md-5">

              </div>

        </div> 
    </div>
</section>

和 css 我也尝试为 div 和 header 提供 0 填充和边距

       body,html {
          margin:0;
         padding:0;
          }
       header{
         margin:0;
         padding:0;
         }  
      .frontpage{
          background:red;
       height:200px;
       margin:0;
       padding:0;
       }
      .ghi{
         background:blue;
          height:220px;

        }

【问题讨论】：

您是否从多个文件编译此输出？如果是这样，您可能需要删除 byte order mark，这在大多数浏览器中几乎会转换为空行。快捷方式是将文件编码从 UTF-8 with signature 更改为 UTF8 without signature。
删除它但仍然无法正常工作..
我会检查浏览器中的元素（右键单击有问题的空格，检查元素）看看它发生了什么。
在元素中，当我将鼠标悬停在具有“nav”和“navbar-default”类的 div 上时。空白区域被突出显示..
如果我可以问的话，它用什么颜色突出显示？另外，你用的是什么浏览器？

标签： html css

【解决方案1】：

使用它

.navbar{
       margin-bottom: 0!important;
    }

body,html {}
header{}  
.frontpage{
 background:red;
   height:200px;       
}
.ghi{
  background:blue;
height:220px;
}

.navbar{
   margin-bottom: 0!important;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

<header>

    <nav role="navigation" class="navbar navbar-fixed navbar-inverse">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle nav-button">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Example</a>
    </div>

    <!-- Collection of nav links and other content for toggling -->

    <div id="navbarCollapse" class="collapse navbar-collapse">

        <ul class="nav navbar-nav nav-ul">

           <li id="tech" class="nav-list">         <a href="#">home</a></li>
           <li id="politics" class="nav-list">     <a href="#">careers</a></li>
           <li id="crime" class="nav-list">        <a href="#">about</a></li>
           <li id="business" class="nav-list">     <a href="#">contact</a></li>


        </ul>

    </div>

    </nav>

</header>

<section class="frontpage">
    <div class="container">
        <div class="row">
              <div class="col-md-5">

              </div>

        </div> 
    </div>
</section>
<section class="ghi">
    <div class="container">
        <div class="row">
              <div class="col-md-5">

              </div>

        </div> 
    </div>
</section>

【讨论】：

不工作。我正在使用引导程序是否有问题？

【解决方案2】：

这是因为浏览器正在为ul 元素添加默认边距。将此样式添加到您的 css 中，它应该可以解决问题：

ul.nav { margin-bottom: 0 !important; }

【讨论】：

试过了但没用...也试过了.nav-ul { margin-bottom: 0; }

【解决方案3】：

以防万一其他人有同样的问题。我根据阅读 https://css-tricks.com/fighting-the-space-between-inline-block-elements/ 来修复它，在我的情况下，我只是添加了这一行 margin-bottom: -10px;

【讨论】：