Los márgenes verticales desaparecen cuando el objeto primario está configurado para desbordamiento: visible

Question

¿Por qué los márgenes verticales desaparecen cuando el elemento primario está configurado como desbordamiento: visible? Si está configurado para desbordamiento: los márgenes ocultos son visibles de nuevo. Parece contradictorio.

Creo que entiendo cómo se supone que el desbordamiento funciona cuando el contenido de un elemento no cabe en él, pero no entiendo qué está sucediendo con los márgenes.

He aquí un ejemplo: (http://jsfiddle.net/VrVc7/)

#outer { 
    background-color:#EEE; 
    overflow:hidden; 
} 

#inner { 
    margin: 30px; 
    padding: 5px; 
    background-color:#ABE; 
} 

<div id="outer"> 
    <div id="inner">abc</div> 
</div> 

Answer 1

Es debido a los márgenes de colapso:

Si tiene overflow: hidden, los márgenes de la div interior permanecen dentro de la div exterior.
Si tiene desbordamiento: visible, los márgenes superior e inferior collpase con los márgenes cero del div externo, porque se tocan entre sí. Esto se recalcula para tener el mismo margen interno.

Por lo tanto, desbordamiento: oculto romperá los márgenes de colapso con los que están dentro. Podrías romper el colapso del margen dando al div externo un relleno o un borde. Para que no se toquen entre sí y por lo tanto sin colapsar

http://www.howtocreate.co.uk/tutorials/css/margincollapsing

Answer 2

Sé que esto es lo que parece. Pero lo que realmente sucede aquí se llama colapso de margen. La mayoría de las veces, si el padre tiene un margen, o si dos hermanos tienen un margen, el otro se superpone. Imagine que tiene un div con tres hijos:

|--| 
|[]| 
|[]| 
|[]| 
|--| 

Si pones un margen de 10 en los niños. Habrá un total de 10 espaciamientos verticales entre cada uno de los niños, aunque es de esperar que haya 20. Esto se debe a que si los márgenes se comparten, colapsan entre sí.

De cualquier manera google, eso lo explicará mejor que nunca.

Answer 3

Se llama collapsing margin. Según W3c

En CSS, los márgenes adyacentes de dos o más cajas (que podría o no podría ser hermanos) pueden combinarse para formar un solo margen. Se dice que los márgenes que se combinan de esta manera se colapsan, y el margen combinado resultante se denomina margen colapsado.

Cómo evitar que collapsing margin.

1. Los márgenes entre una caja flotante y cualquier otra caja no se colapsan (no incluso entre un flotador y sus hijos en el flujo).
2. márgenes de elementos que establecen nuevos contextos de formato de bloque (tales como flotadores y elementos con 'overflow' distintos de 'visible') no se colapsan con sus hijos en-flujo.
3. Los márgenes de los cuadros perfectamente posicionados no colapsan (ni siquiera con sus hijos en flujo).
4. Los márgenes de las cajas de bloque en línea no colapsan (ni siquiera con sus hijos en flujo ).
5. El margen inferior de un elemento de nivel de bloque en flujo siempre se contrae con el margen superior de su siguiente hermano de nivel de bloque en flujo, a menos que tenga permiso.
6. El margen superior de un elemento de bloque en flujo se contrae con su primer margen superior de nivel de bloque de flujo si el elemento no tiene un borde superior , sin relleno superior y el elemento secundario no tiene espacio libre.
7. El margen inferior de un cuadro de bloque de flujo con una 'altura' de 'auto' y un 'min-height' cero colapsa con su último margen inferior de nivel de bloques si el cuadro tiene sin relleno inferior y sin borde inferior y el margen inferior del niño no se contrae con un margen superior que tiene espacio libre.
8. Los propios márgenes de una caja colapsan si la propiedad 'min-height' es cero, y no tiene bordes superiores o inferiores ni relleno superior o inferior, y tiene una 'altura' de 0 o 'auto', y no contiene un cuadro de línea, y todos sus márgenes para niños en flujo (si corresponde) colapsar.