html - texto - Elementos hijo con márgenes dentro de DIVs.

div id html

Question

Necesito dos elementos div consecutivos (con fondos) para tocar sin problemas, uno debajo del otro. Sin embargo, este diseño se rompe cuando coloco un elemento p en el div inferior. Los márgenes del elemento p fuerzan un espacio en blanco entre ambos elementos div . Este es un comportamiento extraño, ya que espero que el margen de la p permanezca dentro del área de contenido y fondo del div . Se reproduce 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.

Podría arreglar esto cambiando los márgenes a los rellenos para el elemento p , pero también tendría que hacer esto con los elementos de encabezado, elementos de lista y cualquier otro elemento que quiera usar al inicio de un div . Eso no es deseable.

¿Podría alguien iluminarme? ¿Qué advertencia sobre el modelo de caja me estoy perdiendo? ¿Hay una manera fácil de solucionar esto, preferiblemente modificando el estilo del div ?

Answer 1

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

Answer 2

Ese es el comportamiento esperado *. Hay algunas maneras de evitarlo. Si hace flotar los divs, contendrán los márgenes de los elementos secundarios y evitarán el colapso del margen. Otro enfoque es agregar un borde o relleno a los divs.

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

Answer 3

Establecer un relleno 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

Agregue overflow: hidden / auto al div que lo contiene para evitar que el margen se contraiga.

Solucion 2

Agregue un relleno positivo al div que lo contiene e igual margen negativo al elemento interno

Nueva solucion

Agregue un relleno de 0.01px al div que lo contiene, esto evitará el colapso del margen pero no necesitará ningún margen negativo en el elemento interno.