родительский div, наследующий дочерние поля divs

Question

Это не происходит все время, но время от времени родительский div наследует свойства дочерних divs и выбрасывает мои макеты из положения.

, например, это HTML (псевдо):

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

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

Css (псевдо):

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

его должен выглядеть следующим образом: ДИВ 1 родитель и DIV 2 ребенок

ДИВ 1parent

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

Предположим, что нет разрыва между div 1 и дополнительным окном.

сейчас, по какой-то причине, используя один и тот же код, приведенный выше, когда я предварительный просмотр, я получаю это:

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

gap here. 

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

независимо от того, что я делаю, я все еще получаю этот пробел. Когда я беру его в firebug и тестирую на Divs, div4 ясно показывает, что маржа влияет на позиционирование родителей.

..Я собирался поставить пример, но ... хорошо 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 дополнений ... вопрос факта, чтобы сделать SURE, я создал фиктивную страницу с ничего, кроме двух div и их css и все еще ........

Любой мысли о том, почему это происходит? потому что прямо сейчас я смотрю на мой последний сайт и этот фиктивный 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; 
    }​ 

? Просто интересно