¿Por qué los márgenes verticales secundarios no expanden el contenedor principal?

Question

Me encontré con un caso en el que necesito un margen para niños para expandir un contenedor principal. Descubrí que el espacio fuera del padre está asignado, pero el padre no está expandido. Luego descubrí que al agregar `overflow: hidden 'al padre podía solucionar este problema.

¿Alguien puede arrojar alguna luz sobre por qué este es el caso?

ACTUALIZACIÓN:

He encontrado que la adición de cualquier relleno o el valor de frontera para el padre también corrige esto.

Updated Example

Answer 1

La respuesta al "por qué" se describe de manera sucinta bien y here. Hay ciertas propiedades que establecen un "block formatting context". A saber:

flotadores, absolutamente [y fija] elementos posicionados, envases de bloque (como Inline-bloques, células de mesa, y de mesa subtítulos) que no se bloquean cajas y cajas de bloque con 'overflow 'distinto de' visible '(excepto cuando ese valor se haya propagado a la ventana gráfica) establezca nuevos contextos de formato de bloque para sus contenidos.

Es este cambio de contexto de formato de bloque que es la razón por qué tales soluciones se han dado anteriormente en los comentarios de trabajo para cómo margin (y en el caso de un precedente float, padding de los siguientes elementos de flujo de entrada) opera .

Answer 2

creo que el colapso de los márgenes es la razón: http://www.w3.org/TR/CSS2/box.html#collapsing-margins