Question

我目前正在为自己创建一个网站，似乎无法弄清楚为什么导航栏的末尾和大图（内容的开头）之间有一个小空间。

由于某种原因，我也无法使JSFiddle文件正常工作。

HTML：

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">

    <!-- Mobile Navigation -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="assets/images/logo1.png" alt=""></a>
      </a>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="index.html" class="hvr-underline-from-center">Home</a></li>
        <li><a href="about.html" class="hvr-underline-from-center">About Us</a></li>
        <li><a href="portfolio.html" class="hvr-underline-from-center">Portfolio</a></li>
        <li><a href="contact.html" class="hvr-underline-from-center">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- End Navigation Bar -->


<header class="mainHeader" style="background-image: url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg');">
  <div class="container">
    <div class="siteContent">
      <h1>Some awesome text about this site!</h1>
    </div>
  </div>
</header>

CSS：

body {
  background-color: #ece8e5;
  padding: 0 !important;
  margin: 0 !important;
  font-family: 'Monda', sans-serif;
  text-align: center;
}

html {
  padding: 0 !important;
  margin: 0 !important;
}

.navbar-default {
  border-color: transparent !important;
  background-color: #303030 !important;
  height: 120px !important;
}

.navbar ul li a {
  color: #ddd !important;
  font-size: 24px;
  padding-top: 45px;
  margin: 1 !important;
  font-weight: 400 !important;
  text-transform: uppercase;
}

.navbar ul li {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.navbar-brand img {
  width: 200px;
  margin-top: 3px;
  margin-left: 20px;
  position: relative;
  -ms-transform: rotate(-5deg);
  /* IE 9 */
  -webkit-transform: rotate(-5deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-5deg);
}

a {
  margin: 0;
  padding: 0;
}

h1 {
  margin: 0 !important;
  padding: 0 !important;
}

.mainHeader {
  margin: 0 !important;
  padding: 0 !important;
}

另请注意，所使用的图像不是网站的图像。

Answer 1

你没有提到它，但是看看你的代码，我想你正在使用Bootstrap。 .navbar默认定义为20px的底部边距，因此您应该在编译之前自定义引导程序 http://getbootstrap.com/customize/ 或者再去一个css线

.navbar {margin-bottom:0;}

你写了

由于某些原因，我也无法使JSFiddle文件正常工作

它对我有用，所以我想知道你是否忘记在JSFiddle的“外部资源”选项卡中包含bootstrap css

Answer 2

您的导航栏底部边距为20.使用以下内容将其更改为0：

.navbar-default {
    border-color: transparent !important;
    background-color: #303030 !important;
    margin-bottom: 0;
}

Answer 3

对于这样的错误，您可以使用＆＃34;检查员＆＃34;确定导致问题的元素是哪个，并弄清楚如何解决;）

为什么我的导航栏和主图片之间有一个小空间？

3 个答案: