Question

我有这段代码：

  <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（contentbox）中是一个较小的div（page-bottom）。

要清理： click here for the image

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

Answer 1

因为添加边距会将材料推向相反方向，即使嵌套也是如此。您应该在.page-bottom添加填充顶部。

Answer 2

您应该将.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>

http://122.21.32.33:8085/

HTML5 - 在div中为div添加边距时出现空白空间

2 个答案: