为什么将嵌套块级元素的边距转移到外部块级元素？

Question

我有以下简单的CSS和HTML代码：

* {
  margin: 0;
  padding: 0;
}

.container {
  background: yellowgreen;
}

.content {
  margin: 20px;
}

<div class="container">
    <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse enim minus error cum, iste tempore quos placeat natus inventore. Tempore ad eos, voluptatem facilis id minus quos exercitationem porro reiciendis?</p>
</div>
<div class="container">
    <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse enim minus error cum, iste tempore quos placeat natus inventore. Tempore ad eos, voluptatem facilis id minus quos exercitationem porro reiciendis?</p>
</div>

我得到的结果是：

请注意，垂直边距应用于div元素之间，而不应用于内部段落与其包装div之间。

我期望得到这样的东西：

此“预期”屏幕截图是通过将填充物添加到.container而不是.content边距而得到的结果：

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

.content {

}

我不明白为什么第一个代码段中的边距为什么不在内部段落与其包含的div之间应用，而是好像在外部div之间应用？