Question

我试图让白色空间消失无济于事！我已经粘贴了我的代码。问题发生在.jumbotron和.footer之间。我知道它必须是带有边距或填充的东西，可能是.jumbotron h2。

HTML：

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="CSS/main.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <title>Niall's Portfolio</title>
  </head>

  <body>
    <audio src="/Users/kmahford/Music/iTunes/iTunes Media/Music/Hiatus Kaiyote/Choose Your Weapon/16 Only Time All the Time_ Making Friends with Studio Owl.m4a" autoplay></audio>
    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
              <h1>ZAH</h1>
          </div>
          <div>
              <ul class="pull-right">
                 <li><a href="AboutMe.html">About Me</a></li>
                 <li><a href="Contact.html">Contact</a></li>
              </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
        <h2>making <span>rustic</span> <span id="and">and</span> <span>modern</span> meet.</h2>
      </div>
    </div>

    <div class="footer">
      <p>&copy; Che Co.</p>
    </div>
  </body>
</html>

CSS：

/* Jumbotron */

.jumbotron {
    height: 600px;
    background: url("https://images.unsplash.com/photo-1432821596592-e2c18b78144f?q=80&fm=jpg&s=a4598570a3286ea23369fdefe46953ba") no-repeat center center;
    background-size: cover;}
.jumbotron h2 {
    margin-top: 0;
    text-align: center;
    color: #1E91B2;
    padding-top: 300px;
    font-size: 50px;
    font-weight: 400;}
.jumbotron span {
    font-weight: 800;}
.jumbotron #and {
    color: #FF8208;
    font-weight: 400;}

Answer 1

正在发生的事情是，在footer中，<p>的边距会推动页脚缩小。

你想要的是添加这段CSS：

.footer p{
    margin:0; 
}

Answer 2

如果我猜对了，你应该改变jumbotron班margin，如下：

<强> CSS

.jumbotron{
   margin-bottom: 0;
}

jsfiddle

如果您还不想在页面底部显示空白，请将margin标记中的p也设置为零。

Answer 3

默认情况下，jumbotron类的底部边距为30px。删除它：

div.jumbotron {margin-bottom:0;}

<强> jsFiddle example

请注意，此是出现间距问题的原因，您必须通过使CSS更具体来覆盖Bootstrap的CSS，以使其生效。

div之间的空白区域

3 个答案: