Colapso de márgenes

En el flujo normal, los márgenes verticales de bloques contiguos no se suman: se fusionan y queda solo el mayor. Es uno de los comportamientos que más sorprende al maquetar.

Entre hermanos: un margin-bottom de 2rem seguido de un margin-top de 1rem deja 2rem, no 3rem.
Entre padre e hijo: el margin-top del primer hijo puede salir por fuera del padre si este no tiene borde, padding ni contenido antes.
Solo ocurre con márgenes verticales y en el flujo de bloque: en flex y grid los márgenes nunca colapsan.
display: flow-root crea un nuevo contexto de formato de bloque y evita que los márgenes de los hijos salgan del padre.

Ejemplo

Los dos hijos tienen margin: 1.5rem 0. Con block los márgenes se fusionan y la separación entre ellos es de 1.5rem; con flex o grid se suman y la separación se duplica.

Selecciona display:

blockflexgrid

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: block;
  flex-direction: column;
  padding: 0.5rem;
}

.child {
  margin: 1.5rem 0;
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: block;
  flex-direction: column;
  padding: 0.5rem;
}

.child {
  margin: 1.5rem 0;
  padding: 1rem;
}

Edita el código o usa los selectores: el resultado cambia al instante.