为什么有些divs的利润率？

Question

我需要帮助，解释为什么边缘应用于包装盒底部的两个盒子而不是顶部的大盒子。例如

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

Becouse你有

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; 
}