div之间的空格答案

【问题标题】：Whitespace between divsdiv之间的空格
【发布时间】：2018-01-27 13:44:10
【问题描述】：

我知道有一百万个关于 div 差距的问题，但我似乎无法找到任何适合我的解决方案。我的网页目前如下所示：

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

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

我尝试在我的 bootstrap.min.css 中创建一个新类，该类对 col-lg-12 div 和 row 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%;
}

【问题讨论】：

好像和.intro-header-homepage的规则里你的background-size: 100% 80%;有关
是的 - 这是背景尺寸。更改为background-size: cover。
div.intro-message 有 padding-top: 20% 和 padding-bottom: 20%;
谢谢。有没有办法做到这一点，同时保持背景与使用background-size: 100% 80%; 所产生的高度相同？我不希望图像占据页面的一半。我尝试将行 div 更改为 <div class = "row" style="height:300px;"> 但这并没有改变任何东西。
@JamesDouglas 我想保留它，因为我想保留“网站主页”文本和图像横幅顶部/底部之间的填充。

标签： html css twitter-bootstrap

【解决方案1】：

解决此问题的另一种方法是将.intro-header-homepage 上的background-size: cover 更改为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

【讨论】：

【解决方案2】：

.intro-message 上的填充将文本向下推。有几种方法可以解决这个问题，但最简单的方法是给文本 (p.homepage) 提供一个大约为 10% 的负值 margin-top 以抵消填充。唯一会改变的是文本的位置。

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

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

JSFiddle

【讨论】：

10% 有点多，但 1% 效果很好！我不知道负利润率是一回事。非常感谢！

【解决方案3】：

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

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

【讨论】：

谢谢！有没有办法做到这一点，同时保持背景与使用background-size: 100% 80%; 所产生的高度相同？我不希望图像占据页面的一半。我尝试将行 div 更改为 <div class = "row" style="height:300px;"> 但这并没有改变任何东西。