El margen del elemento secundario mueve el elemento principal

Tengo un div( padre ) que contiene otro div( hijo ). Parent es el primer elemento bodysin ningún estilo CSS en particular. cuando puse

.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 10 píxeles hacia abajo, mi padre se mueve 10 píxeles hacia abajo.

Mi DOCTYPEestá configurado en XHTML Transitional.

¿Que me estoy perdiendo aqui?

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

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

Nov 19 '09 18:11 Robert Koritnik

Encontré una alternativa en Elementos secundarios con márgenes dentro de DIV. También puedes 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 utilizar lo siguiente para evitar un colapso del margen superior:

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

Actualización de 2021: si está dispuesto a dejar de admitir IE11 , también puede usar la nueva construcción CSS display: flow-root. Consulte MDN Web Docs para obtener todos los detalles sobre los contextos de formato de bloques.

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

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 1px dashed blue;
}

div { outline: 1px solid red; }

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

Expandir fragmento

Debido a que el navegador contrae los márgenes, el texto aparecería como era de esperar y las <div>etiquetas contenedoras no influyen en los márgenes. Cada elemento garantiza que tenga espacio a su alrededor, pero el espacio no se duplicará. Los márgenes de <h2>y <p>no se sumarán, sino que se deslizarán entre sí (se colapsarán). Lo mismo ocurre con el elemento <p>y <ul>.

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

Dec 21 '2009 13:12 vdboor

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

floats, Tienes que hacer flotar elementos.
border-top, Esto empuja al elemento principal al menos 1 px hacia abajo, lo que luego debe ajustarse introduciendo -1pxun margen en el elemento principal. Esto puede crear problemas cuando el padre ya tiene margin-topunidades relativas.
padding-top, el mismo efecto que usarborder-top
overflow: hidden, No se puede usar cuando los padres deben mostrar contenido desbordado, como un menú desplegable
overflow: auto, Introduce barras de desplazamiento para el elemento principal que tiene (intencionalmente) contenido desbordado (como sombras o triángulos de información sobre herramientas)

El problema se puede resolver utilizando pseudoelementos CSS3 de la siguiente manera

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

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

Jun 15 '2015 14:06 Ejaz

agregar estilo display:inline-blockal elemento hijo

Apr 08 '2015 09:04 Атанас Димитров