伙计，它工作。如果你给#parent添加一个兄弟节点，你会看到：

#parent {
  background-color: blue;
  margin-bottom: 40px;
  margin-top: 40px;
}

#child1 {
  background-color: red;
}

#child2 {
  height: 200px;
  background-color: yellow;
  margin-top: -40px;
  margin-bottom: -40px;
}

#sibling {
  background-color: blue;
  height: 40px;
}

<div id="parent">
  <div id="child1">
    <div id="child2"></div>
  </div>
</div>
<div id="sibling"></div>

P.S.使用类而不是id

您的#child2保证金将随parent保证金一起折叠。由于您的parent保证金是2个中最大的，因此忽略了#child2的保证金。
保证金崩溃有点棘手，你可以在这里找到详细的解释：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing
我的猜测是，崩溃的发生是因为你的父母和你的后代之间没有内容，即。你可以通过添加填充，边框等来阻止它。例如child1或child2。
也就是说，用anothe rmargin“取消”一个保证金听起来像是一个黑客，它肯定会使你的代码可读性降低。我不知道你的具体使用情况，但我会考虑替代品。