¿Cómo funcionan los colapsos nesteds del margen vertical?

Me está costando comprender el concepto de que los márgenes verticales se colapsan en elementos nesteds. Llegué un artículo en http://www.howtocreate.co.uk/tutorials/css/margincollapsing explicando cómo funciona, pero estoy confundido por su explicación. Entonces en su ejemplo cita que hay 2 elementos de la siguiente manera

A

Al ver que el div interno tiene un margen de 20px, eso es lo que se aplicará para todo el bloque de código. Lo que me confunde es todo después de eso y todavía no estoy buscando problemas con Internet Explorer 7. ¿Alguien podría explicarlo de manera simplificada para un novato completo de CSS?

Dos reglas para recordar:

  1. Si los márgenes se tocan, se colapsan.
  2. Los elementos nesteds se “acurrucan” si solo el margen los separa.
  3. Los elementos fuera del “Flujo” se comportan de manera diferente. Es decir, este comportamiento no se aplica de la misma manera a flotante, o posición: fija, o posición: elementos absolutos.

Entonces para este HTML (divs nesteds):

 
A

y este CSS inicial:

 #outer { margin-top:10px; background:blue; height: 100px; } #inner { margin-top:20px; background:red; height: 33%; width: 33%; } 

El margen colapsa al máximo de los márgenes conmovedores y el div nested se “acurruca” al inicio del contenedor, de la siguiente manera: ( Véalo en jsFiddle ) .
Colapso del margen anidado

Pero, en el momento en que los dos márgenes están separados, por un borde o por contenido anterior en el contenedor, por ejemplo, los márgenes ya no se tocan, por lo que ya no se colapsan.

EG, solo un pequeño espacio en blanco que no se rompe, así:

 
 
A

mata el colapso: ( Véalo en jsFiddle ) .
El margen anidado no colapsa

Usar un borde, en lugar de texto principal: ( Violín )
sin colapso, borde

Un diagtwig puede ayudar:

Ilustración de márgenes contraídos para divs anidados

En caso de que no fuera obvio: azul = div externo, rojo = div interno; Los dibujé con altura constante y posición horizontal. Puede averiguar qué sucede si la altura se ajusta a los contenidos, etc.

La columna “Antes de colapsar” muestra lo que obtienes si los márgenes no se consideran adyacentes, por ejemplo, si dibujas el borde del div azul / externo; pero si no hay borde, entonces obtiene la columna “Después de colapsar”. La fila superior cambia los dos márgenes del ejemplo, porque creo que el comportamiento en este caso es más intuitivo; el de abajo muestra el ejemplo en howtocreate y es consistente con la fila superior.

Dos reglas para recordar:

Si los márgenes se tocan, se colapsan. Los elementos nesteds se “acurrucan” si solo el margen los separa. Los elementos fuera del “Flujo” se comportan de manera diferente. Es decir, este comportamiento no se aplica de la misma manera a flotante, o posición: fija, o posición: elementos absolutos.

Brock Adams es correcto, pero también quería agregar que “desbordamiento: oculto” también puede evitar que los márgenes nesteds se colapsen.