div rodzicem dziedziczenie marginesu div dzieci

Question

To nie dzieje się przez cały czas, ale co jakiś czas, Div rodzic dziedziczy dziecko divs właściwości i rzuca moje układy pozycjonowania z walnięciem.

na przykład, jest to HTML (pseudo)

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

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

Css (pseudo)

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

jej powinien wyglądać tak jak poniżej: strefa 1 rodzic i div 2 dziecko

div 1parent

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

załóżmy, że nie ma luki od div 1 do okna addy.

teraz z jakiegoś dziwnego powodu, z użyciem tego samego kodu powyżej, kiedy podgląd, dostaję to:

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

gap here. 

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

bez względu na to, co robię jeszcze dostać tę lukę. Kiedy biorę to do firebug i testu na DIV, div2 wyraźnie pokazuje, że margines wpływa na pozycjonowanie rodziców.

..i szło znosić przykład ale ... heres rzeczywisty kod, dzięki czemu można zobaczyć ... (proste, jak może być)

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

i wciąż mam lukę, którą pokazałem powyżej na moim diagramie. To, co doprowadza mnie do szaleństwa, to, jak większość z nas, zrobiliśmy ten układ miliony razy ... Mogę wyciągnąć DOZENS z prac, które używają tej samej metody i żadnych problemów ... mam swój Cssreset, którego zawsze używam. mieć ważne, żadne przypadkowe wypełnienie ... nie ma znaczenia, czy zrobić PEWNĄ, stworzyłem fałszywą stronę z tylko 2 elementami div i ich css i nadal ........

Dowolna myśli, dlaczego tak się dzieje? ponieważ teraz patrzę na moją ostatnią witrynę i ten sztuczny html, który właśnie przetestowałem i na każdej przeglądarce, dostaję tę głupią lukę.

Answer 1

To, co obserwujesz, to zawalenie marży. Może się zdarzyć w scenariuszach, które nie zawsze są łatwe do zrozumienia, więc proponuję nawiązać do documentation.

Answer 2

Dlaczego nie używać:

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

? prostu zastanawiasz