爲什麼有些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; 
}