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 - 增加保證金時出現空的空間內格

回答

相關問題