부모 div 상속 자식 divs 여백

Question

모든 일이지만 때때로, 부모 div 자식 divs 속성을 상속하고 whack 밖으로 내 레이아웃을 throw합니다.

<div 1> 
    <div 2> 
     content here 
    </div> 

</div><!-- div one end --> 

는 CSS (의사) :

#1{ margin top:0; } 
#2 {margin top:10 } 

는 다음과 같이 가정 : 사업부 (1) 부모와 DIV 2

예를 들어

이는 HTML (의사)입니다 아이

사업부의 1parent

----------------------------------------- 
this is address bar (top of win) 
----------------------------------------- 
---------------- 
| ---------- | 
| | div2Child | 
| ------------ | 
|--------------| 

div 1에서 addy 창까지의 간격이 없다고 가정합니다.

지금, 내가 미리 볼 때, 위와 같은 코드를 사용하여 몇 가지 이상한 이유를 들어, 내가 얻을이 :

----------------------------------------- 
this is address bar (top of win) 
----------------------------------------- 

gap here. 

---------------- 
| ---------- | 
| | div2  | 
| ------------ | 
|--------------| 

상관없이 나는 아직도 그 격차를 얻을하는 일. Firebug에 가져 가서 Divs에서 테스트 할 때div2는 여백이 부모 위치에 영향을 미치고 있음을 분명히 보여줍니다.

.. 난은 예를 넣을 거라고하지만 ... 음을 heres 실제 코드 당신이 볼 수 있도록 (단순 할 수있는)

HTML :

<div id="one"> 
    <div id="two">content here on 2</div> 
</div> 

the CSS: 

    #one{ 
     width:1000px; 
     height:300px; 
     background:#09F; 
     margin-top:0px !important; 
padding:0px; 


    } 

    #two{ 
     width:500px; 
     height:100px; 
     background:red; 
     margin-top:20px; 
padding:0px; 
    } 

및 나는 여전히 내 다이어그램에서 위에서 보여준 차이를 얻는다. 저를 미치게 만드는 것은 우리 대부분이 그렇듯이 수백만 번이 레이아웃을했습니다 .... 나는이 같은 방법과 문제를 사용하는 작품의 수십억을 끌어 올릴 수 있습니다 ... 저는 항상 사용하는 Cssreset을 가지고 있습니다. 중요한! 무작위 ... <br/> or <p>, 0 패딩 ... 사실을 확인하기 위해, 나는 2 divs와 그 CSS를 가지고 더미 페이지를 만들었고 여전히 ........

Any 왜 이런 일이 일어날까요? 지금 당장은 내 마지막 사이트를보고,이 더미 HTML을 테스트 해보고 모든 브라우저에서이 어리석은 틈을 찾는다.

Answer 1

관찰중인 것은 마진 축소입니다. 항상 이해할 수없는 시나리오에서 발생할 수 있으므로 documentation을 참조하십시오.

Answer 2

왜 사용하지 :

#one{ 
     width:1000px; 
     height:300px; 
     background:#09F; 
     margin-top:0px !important; 
     padding-top:20px; 
    } 
    #two{ 
     width:500px; 
     height:100px; 
     background:red; 
     margin-top:0px; 
     padding:0px; 
    }​ 

? 그냥 궁금해