Esto podría deberse a un colapso de los márgenes y sé sobre el colapso de los márgenes, al menos cómo afecta a los elementos adyacentes, pero no entiendo cómo funciona en los elementos anidados cuando se trata de márgenes negativos.

Por ejemplo, en este marcado y CSS que lo acompaña:

Margen

<div class="parent">
  <div class="child">
    Child 1
  </div>
</div>

<div class="parent">
  <div class="child negative">
    Child 1
  </div>
</div>

CSS

body {
  background: white;
  padding: 45px;
}

.parent {
  border: 1px solid black;
  margin-bottom: 10px;
}

.negative {
  margin-bottom: -1px;
}

Ejemplo vivoaquí.

Cuando inspecciono la altura del segundo.parent div, me doy cuenta de que es 1 píxel menos que el primero. Esto ha sucedido debido al margen negativo en el.negative elemento en su interior. Eché un vistazo rápido al W3C y no pude encontrar una explicación para este comportamiento.

¿Podría alguien explicar lo que está pasando aquí y también proporcionarme un enlace a la sección de especificaciones del W3C al respecto?