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

하단 상자의 여백이 적용되고 그래서이다, 상단 큰 상자가 왼쪽 및 오른쪽 여백을 무시하면?

당신은 당신의 #maindiv float를 가지고 : 당신 렸기 때문에

Answer 1

는

border: 5px solid; 

편집을해야합니다. 이것을 다음과 같이 지우십시오.

.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.controls 
{ 
    width:   400px; 
    height:   200px; 
    border:   5px solid;  
    margin:   20px 20px 10px 70px; 
    float:   left; 
}