由空格創建的空間採取CSS錯誤的div

Question

我有一個小提琴在這裏顯示此html/css問題http://jsfiddle.net/mjmitche/T6PBn/9/。

我有一個帶有「mainmeal」類（帶有小提琴中的白色背景）的div，我試圖從黑色導航欄中移開。 div的寬度比頁面的主體窄。然而，當我在mainmeal div上放置一個頂部邊距以將其從瀏覽器上推下來時，由頂部邊緣創建的空間是白色的（即，由css爲「主食」設計樣式），並且它延伸了整個身體的寬度。你能解釋爲什麼會發生這種情況，以及如何解決它？

我想要的是由邊距創建的空間採用包含div的「main」的CSS。

感謝

CSS

#header{ 
font-size: 24px; 
background-color: #000; 
min-height: 25px; 
font-weight: bold; 


} 

#main { 
    min-height: 300px; 
    background-color: #b4db9b; 
    width: 500px; 
    position: relative; 

} 

.miracle { 
    color: #1e6023; 

} 
.meal{ 
    color: #fff; 

} 

.mainmeal{ 
    background-color: #fff; 
    width: 400px; 
    height: 150px; 
    font-size: 40px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 20px; 


} 

HTML

<div id="header"> 

    <span class="miracle">Miracle</span><span class="meal">Meal</span> 

</div> 

<div id="main"> 
    <div class="mainmeal"> 

     Main Meal 

    </div> 
    <div id="olddeals"> 
     <div class="column1"> 
     </div> 
     <div class="column2"> 
     <div> 
     <div class="column3"> 
     </div> 

    </div> 

</div> 

Answer 1

這應該解決您的問題：http://jsfiddle.net/T6PBn/11/

#main { 
    min-height: 300px; 
    background-color: #b4db9b; 
    width: 500px; 
    position: relative; 
    /* introduce this */ 
    padding-top: 20px; 
} 

.mainmeal{ 
    background-color: #fff; 
    width: 400px; 
    height: 150px; 
    font-size: 40px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 2

的mainmeal div有150像素的高度，S o整個150像素塊是白色的。如果你降低主食粉的高度，你會得到一個更小的白色盒子。