El colapso de márgenes sucede cuando dos elementos bloque adyacentes tienen un determinado valor de margin, entonces estos márgenes se solapan en un solo valor, el mayor de ambos.
Ejemplo de colapso de márgenes
Mira el siguiente código, cambia el valor de display a inline-block y observa el resultado.
Como puedes observar, al cambiar el display este comportamiento desaparece. Además, en flexbox y grid no ocurre el colapso de márgenes. Cuida los márgenes que colocas en los elementos de tipo bloque.
Contribución creada por Andrés Guano (Platzi Contributor).
