html - margin 使用错误 div 的 css 创建的空间

Question

我有一个 fiddle 在这里显示这个 html/css 问题 http://jsfiddle.net/mjmitche/T6PBn/9/ .

我有一个 div 类“mainmeal”( fiddle 中有白色背景)，我正试图从黑色导航栏向下移动。 div 的宽度比页面的主体窄。但是，当我在 mainmeal div 上放置一个顶部边距以将其从浏览器向下推时，顶部边距创建的空间是白色的(即由 css 设计为“mainmeal”)并且它扩展了整个 body 的宽度.你能解释为什么会发生这种情况以及如何解决它吗？

我想要的是由边距创建的空间采用包含 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;
}