Może to być spowodowane zwijaniem marginesów i wiem o zwijaniu marginesów, przynajmniej w jaki sposób wpływa na sąsiednie elementy, ale nie rozumiem, jak działa na zagnieżdżonych elementach, gdy zaangażowane są ujemne marginesy.

Na przykład w tym znaczniku i towarzyszącym mu CSS:

Narzut

<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;
}

Przykład na żywotutaj.

Kiedy sprawdzam wysokość drugiego.parent div, zauważam, że jest o 1 piksel mniej niż pierwszy. Stało się tak z powodu ujemnej marży na.negative element wewnątrz niego. Rzuciłem okiem na W3C i nie mogłem znaleźć wyjaśnienia tego zachowania.

Czy ktoś mógłby wyjaśnić, co się tutaj dzieje, a także podać mi link do sekcji specyfikacji W3C na ten temat?