스타일시트 margin 값 적용 질문

아래 노란색 부분의 margin 값이 왜 ​ 안 먹힐까요? ㅡㅡ;;;  
이 상황에서 왜 margin값이 적용 안 되는지 궁금해 미치겠습니다. ㅎ   

증상 확인: http://jsfiddle.net/k82fpzkm 

​

또,

#box​에 display:table-cell;을 적용하면 상단 margin값이 적용되긴 하는데, 

좌우 margin에 해당하는 auto가 작동 않습니다. 이것도 왜 그런지 알고 싶습니다. 

증상 확인 :  http://jsfiddle.net/2h66ra1p/   (화면 중앙이 아닌 왼쪽 상단 구석에 붙음)​

 
PS. 
padding 값 적용 방법은 제외. 
<div class=top> 요소 앞에 div 요소 추가하는 법 제외
맨 바깥 div를 table 등 다른 요소로 바꾸는 법 제외.

맨 바깥 div를 display:table-cell​ 속성 넣는 법 제외

<style>
#box {margin:100px auto 0; width:260px; height:260px; border-radius:3px; background:red;}

 

#box .top {margin:20px auto 0; width:230px; height:50px; background:#b90000}

#box .middle {margin:20px auto 0; width:230px; height:50px; background:#b90000; clear:both;}

#box .bottom {margin:20px auto 0; width:230px; height:50px; background:#b90000}
</style>


<div id="box">

  <div class='top'>상단</div>

  <div class='middle'>중단</div>

  <div class='bottom'>하단</div>

</div>