Why is bottom margin inside element box for button but not p element?

Why is it that adding a bottom margin for a p element adds space beyond the element's box (that is not affected by the background color set in CSS), but the inverse is true (the margin remains colored) when adding a bottom margin for a button? (I fixed this by using padding only and setting margin to 0 for the p element, so I'm only asking out of curiosity.)

This CSS:

.about p {
  padding: 0 4em 2em 4em;
  margin: 0 0 2em 0;
  text-align: left;
}

button {
  margin-top: 1em;
  margin-bottom: 2em;
}

Resulted in (note the white space above the "PORTFOLIO" section but not below the button at the bottom):

margins

To view the rest of my code, view CodePen.