页面顶部的空间（Twitter Bootstrap 3）

Question

我在页面顶部有一个空格，我不知道如何删除它。

我在页面示例中创建了背景图片（1,2）。 但我无法找到这条白线的来源。我在css中修改了很多设置而没有结果。

Demo in Bootply

这是我的代码：

<section id="first">
    <h1>TEST!</h1> <br>
</section>
<section id="first1">
    <h1>TEST2!</h1> <br>
</section>

#first {
    background: url(http://placehold.it/1350x890/37FDFC/&text=photo1) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 800px;
    /*height: 800px;*/
    /*padding-bottom: 200px;*/
}

#first1 {
    background: url(http://placehold.it/1350x890/FFFF00/&text=photo2) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 800px;
    /*height: 800px;*/
    /*padding-bottom: 200px;*/
}

Answer 1

只是为了突出克里斯蒂娜所说的，这个问题是由top-margin元素上的h1引起的：

这是一个复制问题的清理版本

＆＃13;

＆＃13;

.background-photo {
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  min-height: 800px;  
}

#first {
  background-image: url(http://placehold.it/1350x890/37FDFC/&text=photo1);
}
#second {
  background-image: url(http://placehold.it/1350x890/FFFF00/&text=photo2);
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<section id="first" class="background-photo">
  <h1>TEST!</h1>
</section>
<section id="second" class="background-photo">
  <h1>TEST2!</h1>
</section>

＆＃13;

＆＃13;

＆＃13;

您可以通过执行以下任一操作来解决此问题：

1）为包含部分添加足够的填充：

.background-photo {
  padding-top: 20px;
}

＆＃13;

＆＃13;

.background-photo {
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  min-height: 800px;  
}

#first {
  background-image: url(http://placehold.it/1350x890/37FDFC/&text=photo1);
}
#second {
  background-image: url(http://placehold.it/1350x890/FFFF00/&text=photo2);
}

.background-photo {
  padding-top: 20px;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<section id="first" class="background-photo">
  <h1>TEST!</h1>
</section>
<section id="second" class="background-photo">
  <h1>TEST2!</h1>
</section>

＆＃13;

＆＃13;

＆＃13;

2）删除标题上的边距：

.background-photo h1 {
  margin-top: 0px;
}

＆＃13;

＆＃13;

.background-photo {
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  min-height: 800px;  
}

#first {
  background-image: url(http://placehold.it/1350x890/37FDFC/&text=photo1);
}
#second {
  background-image: url(http://placehold.it/1350x890/FFFF00/&text=photo2);
}

.background-photo h1 {
  margin-top: 0px;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<section id="first" class="background-photo">
  <h1>TEST!</h1>
</section>
<section id="second" class="background-photo">
  <h1>TEST2!</h1>
</section>

＆＃13;

＆＃13;

＆＃13;