HTML5 - 向 div 内的 div 添加边距时出现空白答案

【问题标题】：HTML5 - Empty space occurs when adding margin to div inside divHTML5 - 向 div 内的 div 添加边距时出现空白
【发布时间】：2016-03-07 01:02:19
【问题描述】：

我有这段代码：

  <body>
    <div class="page-top">
      *
    </div>
    <div class="page-bottom">
      <div class="contentbox">
        <h1>CONTENTBOX</h1>
      </div>
    </div>
  </body>

这是样式表：

body {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

div.page-top {
  padding-bottom: 20%;
}

div.page-bottom {
  padding-bottom: 80%;

  background-image: url('http://hd.wallpaperswide.com/thumbs/fog_at_the_pink_house-t2.jpg');
}

div.contentbox {
  background-color: red;
  margin-top: 10%; <!PROBLEM>

}

问题是：如果我在 contentbox 顶部添加一个边距（请参阅代码），而不是只在“父”div 的顶行 (.page-bottom) 下方的百分之十，它只会创建两个 div 上方的空白区域。

为什么会发生这种情况？我真正想要的是内容 div 在所有边只有大约 20% 的边距，所以它是全屏 div (page-bottom) 中的一个较小的 div (contentbox)。

要清除问题： click here for the image

感谢您的帮助，如果您需要更多信息，我会为您提供！

【问题讨论】：

标签： css html

【解决方案1】：

因为添加边距会将材料推向相反的方向，即使是嵌套的。您应该改为在 .page-bottom 中添加一个 padding-top。

【讨论】：

谢谢，但是如果我想要内容框和页面底部之间的空间清晰，我该怎么办，就像在图像中一样。 page-bottom 的背景需要可见，但我需要内容框是白色的。

【解决方案2】：

您应该将padding-top: 10%; 添加到.page-bottom 以在.contentbox 和父div 之间获得更多空间。请参见下面的示例。还清理了一些代码。

body {
  margin: 0;
}

.page-top {
  background-color: blue;
  padding-bottom: 20%;
}

.page-bottom {
  padding-top: 10%;
  padding-bottom: 80%;
  background-image: url('http://hd.wallpaperswide.com/thumbs/fog_at_the_pink_house-t2.jpg');
}

.contentbox {
  background-color: red;
}

    <div class="page-top">
      *
    </div>
    <div class="page-bottom">
      <div class="contentbox">
        <h1>CONTENTBOX</h1>
      </div>
    </div>

【讨论】：

我喜欢这与我上面所说的完全一样，但不知何故你把功劳归功于这个人。感谢@Roy 如此公平竞争，感谢 mpboom！
@JorelAmthor 我想唯一的原因是这个人发布了工作代码。您必须尽可能完整地完成您的解决方案。不仅是为了让 OP 将其标记为答案，而且是未来的观众参考
@Reddy 很伤心，人们更喜欢复制粘贴而不是按照说明操作。