Why does the top margin of the first paragraph seem to collapse when the outer div has no top margin?

Question

I'm not sure why the first paragraph's top margin seems to collapse here.

https://jsbin.com/bizonokame/edit?html,css,output

Here's the full code:

<style>
.outer {
  margin: 0;
       background-color: blue;
    }

    p {
      margin: 20px 0;
      background-color: rgb(233,78,119);
      color: #fff;
    }
</style>
<div class="outer"><p>paragraph one</p><p>paragraph two</p></div>

I would expect it to collapse only if its parent outer div also had a top margin, but it doesn't have one.

I have the same question with regards to the bottom margin of the second paragraph.