¿Porqué no se suman los márgenes? (Margin Collapse)

El síntoma: El margen del hijo "atraviesa" al padre

Creas una caja contenedora y dentro colocas un título o un párrafo. Decides separar ese texto del borde superior añadiéndole un margin-top al elemento hijo. Sorprendentemente, en lugar de empujar el texto hacia abajo dentro de la caja, ¡toda la caja contenedora se desplaza hacia abajo!

Esto se conoce en CSS como Margin Collapse (colapso o fusión de márgenes): un comportamiento nativo donde ciertos márgenes verticales que se tocan no se suman, sino que se combinan en uno solo.

margin collapse
Fusión de márgenes en CSS

¿Por qué ocurre el colapso?

CSS fusiona los márgenes verticales bajo condiciones muy específicas para evitar huecos gigantescos entre bloques de texto adyacentes. El colapso ocurre principalmente cuando:

  1. Márgenes adyacentes: El margen superior de un elemento hijo toca directamente el margen superior de su padre.
  2. Sin barreras físicas: No hay absolutamente nada en medio que los separe; ni un borde (border), ni un relleno (padding), ni contenido de texto.

El problema: Los márgenes se superponen y el navegador solo aplica el valor que sea más grande de los dos, ignorando por completo el más pequeño.

Arréglalo ahora

En este ejemplo, el contenedor gris debería quedarse arriba y el título separarse por dentro. Sin embargo, el margen del h1 se fusiona con el del div. Modifica el CSS añadiendo una "barrera física" al padre o cambiando la propiedad para que el diseño funcione correctamente.

<head>

<style>

  .contenedor-padre { background-color: #eee; margin-top: 20px; }

  .titulo-hijo { margin-top: 40px; }

</style>

</head>

<body>

<!-- El margen de 40px del hijo se escapa y arrastra al contenedor padre -->

<div class="contenedor-padre">

    <h1 class="titulo-hijo">Título colapsado</h1>

</div>

</body>

Ejemplo: Efecto Margin Collapse entre un elemento contenedor y su primer hijo.

Tip: La solución más limpia es sustituir el margin-top del hijo por un padding-top en el padre. Si necesitas mantener los márgenes obligatoriamente, añadir un border-top: 1px solid transparent; o un padding-top: 1px; en el contenedor padre romperá el contacto directo y detendrá el colapso.