Top and bottom margin ignored

Question

Considering the code in the :

I don't understand why the .title top-margin and .button-container bottom-margin are ignored, while all other margins work as intended.

The code, for reference :

h1,
.content,
.button-container {
  background-color: #94a6f8;
  margin: 8px;
  display: block;
}

h1 {
  padding: 8px;
  font-size: 16px;
}

.content,
.button-container {
  padding: 16px 8px;
}

<div class="card">
  <h1 class="title">I'm a card</h1>
  <div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
  <div class="button-container">and a <button>BIG BUTTON</button></div>
</div>