div padre heredando divs child margin

Question

No sucede todo el tiempo, pero, de vez en cuando, el div principal hereda las propiedades de los divs secundarios y deja mis diseños fuera de control.

por ejemplo, este es el HTML (pseudo):

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

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

el Css (pseudo):

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

su supuesta a tener este aspecto: div 1 el padre y div 2 el niño

div 1parent

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

supongamos que no hay un espacio desde la ventana div 1 a addy.

ahora, por alguna extraña razón, utilizando el mismo código anterior, cuando la vista previa, me sale esto:

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

gap here. 

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

no importa lo que hago sigo teniendo esa brecha. Cuando lo llevo a Firebug y pruebo en Divs, div2 muestra claramente que el margen está afectando el posicionamiento de los padres.

..i iba a poner un ejemplo, pero ... bueno aquí está el código real para que pueda ver ... (simple como puede ser)

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

y todavía tengo la brecha que mostré arriba en mi diagrama. Lo que me vuelve loco es que, como la mayoría de nosotros, hemos hecho este diseño millones de veces ... puedo sacar docenas de obras que usan este mismo método y sin problemas ... tengo mi Cssreset que siempre uso. tiene el! importante, no aleatorio <br/> or <p>, 0 relleno ... de hecho para hacer SEGURO, creé una página ficticia con nada más que los 2 divs y su CSS y todavía ........

Cualquier pensamientos sobre por qué sucede esto? porque en este momento estoy mirando mi último sitio de creación y este html ficticio que acabo de hacer para probar y en cada navegador, obtengo esa estúpida brecha.

Answer 1

Lo que está observando es colapso de margen. Puede suceder en escenarios que no siempre son fáciles de entender, por lo que sugiero que se refiera al documentation.

Answer 2

Por qué no usar:

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

? preguntando