HTML5 - 增加保证金时出现空的空间内格

的div我有这样一段代码：HTML5 - 增加保证金时出现空的空间内格

<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

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

来源

2016-03-06 mpboom

-1

您应该添加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>

来源

2016-03-06 17:02:19 Roy

谢谢，这是工作！ – mpboom

我喜欢这和我上面说的完全一样，但是不知怎的，你给这个人提供了信用。感谢@罗伊是如此公平，并感谢mpboom！ –

@JorelAmthor我想唯一的原因是这家伙发布了工作代码。您必须尽可能完整地使用您的解决方案。不仅OP将其标记为答案，而且也是未来的观众参考 –

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

来源

2016-03-06 16:50:08

谢谢，但我能做些什么，如果我想contentbox和页面底部清晰，间距一样的形象。页面底部的背景需要可见，但我需要的内容只是白色。 – mpboom

HTML5 - 增加保证金时出现空的空间内格

回答

相关问题