为什么边距不会坍塌成外垫？

Question

我已经阅读过有关保证金崩溃的信息，并认为我对此有很好的把握，但我没有发现保证金在外部填充物中崩溃，我的意思是：

.element {
  background: blue;
  margin: 20px auto;
}

.container {
  background: red;
  padding: 20px;
}

<div class="container">
  <div class="element">A</div>
  <div class="element">B</div>
</div>

我对CSS不是很有经验，所以我读它的方式是：

容器想要一个20px的填充（内部空间），并且元素希望它周围有20个像素（垂直）。

第一个元素只需要从顶部开始是20px来满足两者，但是它是40px（容器的填充+元素的边距）。我开始相信我的期望是错误的，但这不是有道理的吗？是否有“触发”此行为的设置？

我知道.element:first-of-type { margin-top: 0px }和.element:last-of-type { margin-bottom: 0px }会在视觉上达到我想要的结果，但从语义上讲，我现在有三种类型的元素。