In the following snippet, why do the `h2` and `p` margins overlap, yet the `p` and `button` margins don't?

I've coloured the backgrounds so you can evidently see that the spacing is off, even though all 3 elements have the same margin....

```css
body {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#textContainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#textContainer>* {
  position: relative;
  margin: 15px 0;
  background-color: blue;
  color: #fff;
}

button {
  background-color: transparent;
  border: 2px solid rgb(51, 51, 51);
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="textContainer" class="col-xs-6">
  <h2>Lorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc con non. Proin ut lacus sodales, rutrum mi vel, faucibus lacus. </p>
  <button type="button" class="btn btn-default btn-lg">faucibus lacus</button>
</div>
```