El margen superior de CSS de afecta el margen de los padres

Hace tiempo que observo este problema y no he encontrado una respuesta directa. Cuando agrego un margen superior a un elemento, en mi caso sucede principalmente con encabezados. En muchas ocasiones, el margen superior se comparte con el padre.

HTML

My title

CSS

 div{ padding:20px; } h1{ margin-top: 20px; } 

El resultado del código anterior también agregará un margen superior al div, como si tuviéramos lo siguiente:

 div{ padding:20px; margin-top:20px; /*this one is implemented by the browser, not written on the code*/ } 

Una forma de resolver esto es agregando overflow:auto al padre, en este caso el div css tiene:

 div{ padding:20px; overflow:auto; } 

Aunque el ejemplo anterior resuelve el problema, no me queda claro ¿ POR QUÉ? . Esto tiene algo que ver con el “colapso de los márgenes” , donde aparentemente un margen se combina con el margen de los padres. ¿ Pero por qué ???

¿Cómo sabemos cuándo un padre colapsará el margen del niño y cuando no, cuál es el propósito de esta propiedad de los bloques, o es un error?

Aquí hay una demostración de JSFiddle del problema.

Y aquí está una demostración JSFiddle de la solución

Gracias.

Gracias a todos por sus respuestas, @ gaurav5430 publicó un enlace con una definición muy precisa que me gustaría resumir en esta respuesta. Desde el momento en que decidieron que estos elementos deberían comportarse así, todavía no está claro para mí; pero al menos pudimos encontrar una regla que se aplica al colapso de los márgenes:

“En términos simples, esta definición indica que cuando los márgenes verticales de dos elementos se tocan, solo se respetará el margen del elemento con el mayor valor de margen, mientras que el margen del elemento con el menor valor de margen se colapsará a cero

Básicamente, en nuestro ejemplo sobre la pregunta original, el margen superior más grande es el de la

por lo tanto, tomado y aplicado al padre

.

Esta regla se cancela por:

  • Elementos flotantes
  • Elementos absolutamente posicionados
  • Elementos de bloque en línea
  • Elementos con desbordamiento configurados en cualquier otra cosa que no sea visible (No colapsan los márgenes con sus hijos).
  • Elementos eliminados (No colapsan sus márgenes superiores con el margen inferior del bloque principal).
  • El elemento raíz

Esa es la razón por la cual el overflow:hidden solucionó el problema.

Gracias @ gaurav5430; aquí está la referencia: http://reference.sitepoint.com/css/collapsingmargins

También gracias a @Adrift que publicó muy buenos recursos, aunque encontré la respuesta de @ gaurav5430 más directa y más fácil de entender.

Si el elemento es el primer elemento secundario, agregará el margen superior al elemento principal, contrayéndose con el margen superior del elemento principal.

El por qué a veces el margen no colapsa se dice claramente en la sección W3 colapsando márgenes .

Recomiendo usar relleno de margen o esta solución alternativa: Margen en el elemento hijo mueve el elemento padre , ya que el overflow: hidden puede agregar daño colateral.

mira este ejemplo: violín

HTML:

 

margin in parent

 

margin inside

CSS:

 #outside { background-color: #ccc; border:1px solid #000; } #div1 { background-color: #66d; } #div1 h1 { margin: 20px 0 0 0; } #div2 { background-color: #6d6; } #div2 h1 { margin: 20px 0 0 0; } 

aquí hay un buen artículo, con una pequeña explicación

http://reference.sitepoint.com/css/collapsingmargins

encuentra esto en el enlace de arriba …

Colapsando los márgenes entre elementos primarios y secundarios

Hasta ahora, solo hemos abordado el efecto de colapso en los elementos adyacentes, pero el mismo proceso es cierto para los padres y los niños cuyos márgenes se tocan. Por “toque”, nos referimos a los lugares en los que no existe relleno, bordes o contenido entre los márgenes adyacentes. En el siguiente ejemplo, un elemento padre tiene un elemento secundario en el que se establece un margen superior:

h1 {margen: 0; fondo: #cff; } div {margen: 40px 0 25px 0; fondo: #cfc; } p {margen: 20px 0 0 0; fondo: # cf9; } En la hoja de estilos anterior, puede ver que se declara un valor de margen superior para el elemento p, y en el fragmento de código a continuación, puede ver que el elemento p es un elemento secundario del elemento div:

Contenido de encabezado

Contenido del párrafo

El resultado de este código se ilustra en la Figura 2.

Figura 2. Márgenes que se colapsan en un párrafo secundario. Una ilustración de los márgenes que se colapsan entre un elemento h1 y un elemento div con un elemento child p. Hay un espacio vertical de 40 píxeles entre el elemento h1 y el contenido del párrafo. Es posible que haya esperado que el párrafo se encuentre a 60px del encabezado, ya que el elemento div tiene un margen superior de 40px y hay otro margen superior de 20px en el elemento p. También puede haber esperado que 20px del color de fondo del elemento div se muestre arriba del párrafo. Esto no sucede porque, como puede ver en la Figura 2, los márgenes colapsan para formar un margen. Solo se aplica el margen más grande (como en el caso de los bloques contiguos), como ya hemos visto.

De hecho, obtendríamos el mismo resultado si nuestro elemento div no tuviera margen superior y el elemento p tuviera un margen superior de 40 píxeles. El margen superior de 40px en el elemento p se convierte efectivamente en el margen superior del elemento div, y empuja el div hacia abajo de la página 40px, dejando el elemento p anidando cómodamente en la parte superior. Ningún fondo sería visible en el elemento div encima del párrafo. …

resolver el problema con overflow: auto; no es bueno, has intentado dar una ID o CLASE a tu div y luego hacer esto en tu CSS

 #divID{ padding:auto; } #divID h1{ margin-top: 20px; } 

nunca use overflow porque puede causarle más problemas si agrega un SELECT dentro de su DIV, buena suerte

Hay tres formas diferentes de CSS en las que puedes determinar qué elementos deseas diseñar. Cada forma es útil para un conjunto específico de propósitos, pero si se usan los tres juntos, se puede aprovechar la potencia en cascada de las hojas de estilo. Los tres métodos para describir objetos en una página son por su nombre de etiqueta, su ID o su clase.