Question

我在红色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;

        }

Answer 1

使用它

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

＆＃13;

body,html {}
header{}  
.frontpage{
 background:red;
   height:200px;       
}
.ghi{
  background:blue;
height:220px;
}

.navbar{
   margin-bottom: 0!important;
}

＆＃13;

<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>

＆＃13;

Answer 2

以防其他人有同样的问题。我根据我的案例中的https://css-tricks.com/fighting-the-space-between-inline-block-elements/修正了它，只是添加了这一行margin-bottom：-10px;

Answer 3

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

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

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

3 个答案: