CSS: Algunas curiosidades de 'margin collapsing'

Lo que en CSS se llama margin collapsing consiste en que cuando los margenes verticales de dos elementos de bloque se tocan, se fusionan en uno solo, del tamaño del mayor.

No encuentro una buena traducción en español así que hablaremos de margenes que se fusionan o se combinan.

Este comportamiento hace que, por ejemplo, si definimos que los párrafos tengan un margen de 10px, queden separados exactamente 10 pixels y no 20, que sería la suma del margen inferior del primer párrafo y el margen superior del segundo.

Este es el caso más sencillo y resulta fácil de comprender, pero cuando el fusionado de márgenes ocurre con elementos anidados, da lugar a situaciones un poco más confusas.

Elementos anidados

La combinación automática de margenes también se puede dar con un elemento dentro de otro. Los margenes del elemento padre y el elemento hijo se fusionan en uno sólo.

Por ejemplo, tenemos el siguiente HTML:

Se trata símplemente de un DIV dentro de otro, cada uno con su margen. Si no hubiera combinación de márgenes, lo veríamos así:

 Como vemos en la imagen superior, los márgenes top y bottom de los dos elementos están en contacto, por lo que se van a fusionar quedando sólo un margen, el mayor de los dos ( en este caso el de 30px):

 

El DIV interior queda sin margen. El DIV exterior queda con un margen de 30px.

 Lo curioso de este caso es que aunque el DIV interior sea el que tiene el margen más grande, el margen resultante se va a aplicar al DIV exterior. Cambiemos los márgenes en el HTML:

Si los margenes no se fusionan lo veríamos así:

 Igual que antes, tenemos dos DIVs cuyos márgenes están en contacto, por lo tanto se fusionan y queda un sólo margen del valor más grande.

 La conclusión es que el margen resultante se aplica siempre al elemento más externo que participa en la combinación. El DIV naranja siempre se queda sin margen. No importa cuál sea el valor que prevalece, se aplica siempre al elemento exterior.

¿Cómo evitamos que ocurra?

Es importante resaltar que para que se produzca esta combinación de márgenes, estos se tiene que tocar. Podemos evitar que ocurra si hay algo entre ellos. Basta con poner un borde o un *padding* que los separe:

 Además, cuando los elementos de bloque tienen alguna de las siguientes características, no se produce la combinación de márgenes:

• Elementos flotantes
• Elementos con posición absoluta
• Elementos inline-block
• Elementos con overflow diferente de visible. Sus márgenes no se fusionan con elementos hijo
• Elementos con clear

References:
CSS - Auto-height and margin-collapsing
Understand CSS margins collapsing
CSS Tutorial - Margins Collapsing
Collapsing margins