El margen en el elemento hijo mueve el elemento padre

Tengo un div( padre ) que contiene otro div( hijo ). Parent es el primer elemento bodysin un estilo CSS particular. Cuando configuro

.child
{
    margin-top: 10px;
}

El resultado final es que la parte superior de mi hijo todavía está alineada con el padre. En lugar de que el niño se mueva 10px hacia abajo, mi padre se mueve 10px hacia abajo.

Mi DOCTYPEestá configurado para XHTML Transitional.

¿Que me estoy perdiendo aqui?

edit 1
Mi padre necesita tener dimensiones estrictamente definidas porque tiene un fondo que se debe mostrar debajo de arriba a abajo (píxel perfecto). Por lo tanto, establecer márgenes verticales es imposible .

edit 2
Este comportamiento es el mismo en FF, IE y CR.

Encontró una alternativa en elementos secundarios con márgenes dentro de DIV También puede agregar:

.parent { overflow: auto; }

o:

.parent { overflow: hidden; }

Esto evita que los márgenes colapsen . El borde y el relleno hacen lo mismo. Por lo tanto, también puede usar lo siguiente para evitar un colapso del margen superior:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

Actualización por solicitud popular: el objetivo de contraer los márgenes es manejar el contenido textual. Por ejemplo:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

Debido a que el navegador contrae los márgenes, el texto aparecería como era de esperar, y las <div>etiquetas del contenedor no influyen en los márgenes. Cada elemento asegura que tiene espacio alrededor, pero el espacio no se duplicará. Los márgenes de <h2>y <p>no se suman, pero se deslizan entre sí (colapsan). Lo mismo sucede para el elemento <p>y <ul>.

Lamentablemente, con diseños modernos, esta idea puede morderte cuando quieres explícitamente un contenedor. Esto se llama un nuevo contexto de formato de bloque en CSS speak. El overflowtruco o margen te dará eso.

Este es un comportamiento normal (al menos entre las implementaciones del navegador). El margen no afecta la posición del niño en relación con su padre, a menos que el padre tenga relleno, en cuyo caso la mayoría de los navegadores agregarán el margen del niño al relleno del padre.

Para obtener el comportamiento que desea, necesita:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

Aunque todas las respuestas solucionan el problema, vienen con compensaciones / ajustes / compromisos como

• floats, Usted tiene que flotar elementos
• border-top, Esto empuja al padre al menos 1px hacia abajo, que luego debe ajustarse introduciendo -1pxmargen al elemento padre en sí. Esto puede crear problemas cuando el padre ya tiene margin-topunidades relativas.
• padding-top, el mismo efecto que usar border-top
• overflow: hidden, No se puede usar cuando el padre debe mostrar contenido desbordado, como un menú desplegable
• overflow: auto, Presenta barras de desplazamiento para el elemento principal que tiene (intencionalmente) contenido desbordado (como sombras o triángulo de información sobre herramientas)

El problema se puede resolver utilizando pseudo elementos CSS3 de la siguiente manera

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

agregar estilo display:inline-blockal elemento hijo

el elemento padre no debe estar vacío al menos  antes del elemento hijo.

Esto es lo que funcionó para mí.

.parent {
padding-top: 1px;
margin-top: -1px;
}

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

Descubro que, dentro de su .css> si configura la propiedad de visualización de un elemento div para bloquear en línea , soluciona el problema. y el margen funcionará como se espera.

Solución ordenada solo para CSS

Use el siguiente código para anteponer un primer hijo sin contenido al div que se mueve involuntariamente:

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

La ventaja de este método es que no necesita cambiar el CSS de ningún elemento existente y, por lo tanto, tiene un impacto mínimo en el diseño. Junto a esto, el elemento que se agrega es un pseudo-elemento, que no está en el árbol DOM.

El soporte para pseudo-elementos está muy extendido: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+ e IE 8+. Esto funcionará en cualquier navegador moderno (tenga cuidado con el más nuevo ::before, que no es compatible con IE8).

Contexto

Si el primer hijo de un elemento tiene un margin-top, el padre ajustará su posición como una forma de contraer márgenes redundantes. ¿Por qué? Es así como así.

Dado el siguiente problema:

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

Puede solucionarlo agregando un elemento secundario con contenido, como un espacio simple. Pero todos odiamos agregar espacios para lo que es un problema de solo diseño. Por lo tanto, use la white-spacepropiedad para falsificar contenido.

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

Donde position: relative;asegura el correcto posicionamiento de la solución. Y white-space: pre;hace que no tenga que agregar ningún contenido, como un espacio en blanco, a la solución. Y height: 0px;width: 0px;overflow: hidden;se asegura de que nunca verás la solución.

Es posible que deba agregar line-height: 0px;o max-height: 0px;asegurarse de que la altura sea realmente cero en los navegadores IE antiguos (no estoy seguro). Y, opcionalmente, puede agregarlo <!--dummy-->en los antiguos navegadores IE, si no funciona.

En resumen, puede hacer todo esto solo con CSS (lo que elimina la necesidad de agregar un elemento secundario real al árbol DOM de HTML):

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>

Para evitar "Div parent" use el margen de "div child":
En parent use estos css:

• Flotador
• Relleno
• Frontera
• Desbordamiento

La marginmayoría de los elementos contenidos dentro .childestán colapsando.

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

En este ejemplo, precibe un marginestilo predeterminado del navegador. El valor predeterminado del navegador font-sizesuele ser de 16 píxeles. Al tener margin-topmás de 16px #child, comienzas a notar su movimiento de posición.

También tuve este problema, pero preferí evitar hacks de márgenes negativos, así que puse un

<div class="supercontainer"></div>

a su alrededor todo lo que tiene rellenos en lugar de márgenes. Por supuesto, esto significa más divitis, pero probablemente sea la forma más limpia de hacerlo correctamente.

Curiosamente, mi solución favorita para este problema aún no se menciona aquí: usar flotadores.

html:

<div class="parent">
    <div class="child"></div>
</div>

css:

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

Véalo aquí: http://codepen.io/anon/pen/Iphol

tenga en cuenta que en caso de que necesite altura dinámica en el padre, también tiene que flotar, así que simplemente reemplácelo height:100px;porfloat:left;

Una solución alternativa que encontré antes de saber la respuesta correcta era agregar un borde transparente al elemento padre.

Sin embargo, su caja utilizará píxeles adicionales ...

.parent {
    border:1px solid transparent;
}

Usar en toplugar de margin-topes otra posible solución, si corresponde.