Margin Collapsing en CSS

Margin Collapsing en css es un efecto que se produce cuando el margen vertical de dos elementos se tocan, como consecuencia se fusionan en uno solo y pasa a formar parte de uno de los elementos, dejando el otro sin margen. El tamaño del margen colapsado se corresponderá con el de mayor tamaño.
Este comportamiento es bueno para texto como párrafos, títulos pero hay otras circunstancias donde no será el resultado esperado.
Margin Collapsing no se producirá cuando existan elementos con borde,flotantes, con padding, con posición absoluta, inline-block, con overflow diferente de visible.
Vamos a ver unos ejemplos donde se produce.


Elementos anidados

Cuando tenemos un elemento dentro de otro y el margen superior del padre y el superior del hijo se tocan,es decir, en el mismo punto donde termina el margen superior del hijo, empieza el del padre, pasa lo mismo con el margen inferior. los margenes colapsados en este caso pasa a formar parte del padre.
Para este html y css.

.container{
    background:#E5E5E5;
    border:1px solid black;
    width:400px;
}
    
#parent{
    background: red;
    margin:20px;
}

#child{
    margin:20px;
    background:blue;
    height:55px;
}

Este es el resultado que obtenemos. Si os fijáis el margen superior e inferior del hijo no aparece

Para solucionarlo, en este caso nos puede servir poner un padding al padre, para que no se toquen los margenes del hijo y el padre.

#parent{
    background: red;
    margin:20px;
    padding: 1px;
}

Y el hijo ya recupera el margen superior e inferior.

Elementos adjacentes

Si tenemos varios elementos, uno encima de otro y le añadimos un margen de 10 px por ejemplo, el resultado esperado seria que entre elementos hubiera un margen de 20 px, 10 de cada uno.
Para este html y css.

.container{
    background:#E5E5E5;
    border:1px solid black;
    width:400px;
}
    
.sibling{
    margin:10px;
    background:Yellow;
    height:50px;
    width:380px;  
    border:1px solid black;
}

Este es el resultado que obtenemos. Entre los bloques hermanos la distancia es igual que en el superior e inferior con el contenedor, 10 px

Para solucionarlo,podemos hacer que los divs floten y añadir un div con clear y de esta forma evitamos la fusión de margenes.

.sibling{
    margin:10px;
    background:Yellow;
    height:50px;
    width:380px;
    float:left;     
    border:1px solid black;
}

.clear{
    clear:both;
}

Entre los bloques ya hay un margen de 20 px.

En CSS3 para navegadores webkit existe la propiedad -webkit-margin-collapse que asignando el valor separate se consigue evitar margin collapsing, pero esa solución no esta estandarizada para todos los navegadores por el momento.

Código fuente con ejemplos vistos en este post.

Libros Relacionados

---