Elementos secundarios con márgenes dentro de los DIV

Question

Necesito dos div s consecutivos (con fondos) para tocar sin problemas, uno debajo del otro. Sin embargo, este diseño se rompe cuando coloco un elemento p secundario en la parte inferior div. Los márgenes del elemento p fuerzan un espacio en blanco entre ambos div s. Este es un comportamiento extraño, ya que estoy esperando que el margen del p permanezca dentro del área de contenido y fondo del div. Se representa de la misma manera en Firefox, Chrome e IE 8.

<div style="background: #ccccff">Top Div</div> 
<div style="background: #ffcccc"><p>Bottom Div</p></div> 

Esto es lo que parece.

pude solucionar este problema cambiando los márgenes de los acolchados para el elemento p, pero entonces yo también tendría que hacer esto con elementos de encabezado, elementos de la lista, y cualquier otro elemento que quiero usar en el comienzo de un div. Eso no es deseable

Podría alguien aclararme: ¿qué advertencia del modelo de caja me falta? ¿Hay una manera fácil de arreglar esto, preferentemente modificando el estilo del div?

Answer 1

Esa es la expected behavior *. Hay algunas formas de evitarlo. Si coloca los divs, estos contendrán los márgenes de los elementos secundarios y evitarán el colapso de los márgenes. Otro enfoque es agregar un borde o relleno a los divs.

* Los márgenes del div y la p "se combinan para formar un solo margen", aunque estén anidados, porque tienen márgenes adyacentes sin margen o borde entre ellos.

Answer 2

Añadir overflow: hidden o overflow: auto a la div

Answer 3

Configuración de un acolchado positivo, y un margen negativo correspondiente en el elemento div parece solucionar el problema, aunque no sé por qué.

<div style="background: #ccccff">Top Div</div> 
<div style="background: #ffcccc; padding: 1px; margin: -1px"><p>Bottom Div</p></div> 

Answer 4

Solución 1

Agregar overflow: hidden/auto en el div que contiene para evitar el colapso del margen.

Solución 2

agregar relleno positiva a la div que contiene e igual margen negativo al elemento interno

nueva solución

agregar relleno de 0.01px a la div que contiene, esta evitará que se colapse el margen, pero no necesitará ningún margen negativo en el elemento interno.