为什么某些 div 的边距？

Question

我需要帮助解释为什么将边距应用于 wrapperdiv 中的底部两个框而不是顶部的大框。示例

html:

<div id = "mainWrapperdiv"> 
    <div id = "maindiv">  
        <div id = "moveablediv" >
            <div id = "centerPointdiv"></div>
        </div>  
    </div> 
    <div id = "animationsdiv" class = "controls"></div>
    <div id = "optionsdiv" class = "controls"></div>
</div> 

css:

*
{
    padding:        0px;
    margin:         0px;
}

div
{
    border:         1px solid;
}   

#mainWrapperdiv
{ 
    width:          1000px; 
    display:        block;
    margin-left:    auto;
    margin-right:   auto;
}     

/**** CSS approach to forcing the main containter div to include it's floated elements *****/   
#mainWrapperdiv:after
{
    content:            ".";
    display:            block; 
    clear:              both; 
    height:             0px; 
    visibility:         hidden;
}   
/***** end main containter div including floated elements **********************************/ 

#maindiv
{  
    width:          850px;  
    height:         500px;  
    border:         5px solid; 
    margin:         30px 0px 30px 70px; 
    float:          left;
} 

div.controls 
{ 
    width:          400px; 
    height:         200px; 
    border:         5px solid;    
    margin:         20px 20px 10px 70px;
    float:          left;
}

当顶部大框忽略左右边距时，是否应用底部框的边距？

Answer 1

因为你有一个

border: 5px solid;

编辑：

您的#maindiv 有一个浮点数。尝试像这样清除它：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

<div id = "mainWrapperdiv"> 
    <div id = "maindiv" class="clearfix">  
        <div id = "moveablediv" >
            <div id = "centerPointdiv">Center Point div</div>
        </div>  
    </div> 
    <div id = "animationsdiv" class = "controls">Animations div</div>
    <div id = "optionsdiv" class = "controls">Options div</div>
</div> 

并尝试将一些内容放入div中只是为了测试。

在 div.control（底部 2 个 div）中设置边距：

div.controls 
{ 
    width:          400px; 
    height:         200px; 
    border:         5px solid;    
    margin:         20px 20px 10px 70px;
    float:          left;
}