Question

我知道有一百万个关于div差距的问题，但我似乎无法让任何解决方案适合我。我的网页目前看起来像这样：

图片横幅和文字之间存在明显差距。我想缩短它，使它看起来更像这样：

我很确定这是我的一个div的CSS问题，但我不确定是什么。以下是检查员的样子，如果有帮助的话：

我已经尝试在我的bootstrap.min.css中创建一个新类，它没有col-lg-12 div和行div的顶部填充，但是没有改变任何东西。我不确定从哪里开始。

这是我的代码（and here is the website in action on JSFiddle）。（我只复制/粘贴了它的相关部分，因为整个代码很长。如果任何代码错误或令人困惑，我道歉！）

<div class="intro-header-homepage">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="intro-message">
                        <h1>Website Homepage</h1>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class = "col-lg-6 col-lg-offset-3" text-align="center">
            <p class="p-homepage">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
 </body>

CSS：

.p-homepage {
    padding: 0px 0px 30px 0px;
    font-weight: normal;
    font-size: 18px; 
    }   
.intro-header-homepage {
    text-align: center;
    color: #f8f8f8;
    background: url(http://imgur.com/20qY3EH.jpg) no-repeat;
    background-size: 100% 80%;
}

.intro-message {
    padding-top: 20%;
    padding-bottom: 20%;
}

Answer 1

.intro-message上的填充正在推送文字。有几种方法可以解决这个问题，但最简单的方法是给文本（p.homepage）一个约margin-top的负10%来抵制填充。唯一会改变的是文本的位置。

＆＃13;

body,
html {
  width: 100%;
  height: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.p-homepage {
  padding: 0px 0px 30px 0px;
  font-weight: normal;
  font-size: 18px;
  margin-top: -10%;
}

.navbar-sticky-top {
  /* add navbar */
  background-color: #0D1721;
  border-color: #0D1721;
  margin-bottom: 0;
}

.topnav {
  font-size: 14px;
}

.lead {
  font-size: 18px;
  font-weight: 400;
}

.intro-header-homepage {
  text-align: center;
  color: #f8f8f8;
  background: url(http://imgur.com/20qY3EH.jpg) no-repeat;
  background-size: 100% 80%;
}

.intro-message {
  padding-top: 20%;
  padding-bottom: 20%;
}

.intro-message>h1 {
  margin: 0;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
  font-size: 5em;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-sticky-top topnav" role="navigation">
    <div class="container topnav">
      <div class="navbar-header">
        <a class="navbar-brand topnav" href="#">Home</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#">Imagery</a>
          </li>
          <li>
            <a href="#">Education and Outreach</a>
          </li>
          <li>
            <a href="index.html">Data Resources</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="intro-header-homepage">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="intro-message">
            <h1>Website Homepage</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-lg-offset-3">
      <p class="p-homepage">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</body>

</html>

＆＃13;

JSFiddle

Answer 2

我猜是简单而准确的答案。

background-size: 100% 80%;中的.intro-header-homepage导致它，因为它只是使背景变小（高度），但这并不意味着div大小会改变。

Answer 3

解决此问题的另一种方法是更改为background-size: cover上的.intro-header-homepage，然后减少padding-bottom上的.intro-message。

然后，您可能需要在.p-homepage的顶部添加一些填充。

请参阅下面的示例：

body,
html {
  width: 100%;
  height: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.p-homepage {
  padding: 20px 0px 30px 0px;
  font-weight: normal;
  font-size: 18px;
}

.navbar-sticky-top {
  /* add navbar */
  background-color: #0D1721;
  border-color: #0D1721;
  margin-bottom: 0;
}

.topnav {
  font-size: 14px;
}

.lead {
  font-size: 18px;
  font-weight: 400;
}

.intro-header-homepage {
  text-align: center;
  color: #f8f8f8;
  background: url(http://imgur.com/20qY3EH.jpg) no-repeat;
  background-size: cover;
}

.intro-message {
  padding-top: 20%;
  padding-bottom: 8%;
}

.intro-message>h1 {
  margin: 0;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
  font-size: 5em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-sticky-top topnav" role="navigation">
    <div class="container topnav">
      <div class="navbar-header">
        <a class="navbar-brand topnav" href="#">Home</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#">Imagery</a>
          </li>
          <li>
            <a href="#">Education and Outreach</a>
          </li>
          <li>
            <a href="index.html">Data Resources</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="intro-header-homepage">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="intro-message">
            <h1>Website Homepage</h1>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="row">
    <div class="col-lg-6 col-lg-offset-3" text-align="center">
      <p class="p-homepage">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</body>

Jsfiddle

div之间的空格

3 个答案: