How to avoid margin collapse of two elements inside their respective parents?

Question

How to prevent the margins of both inner divs from collapsing?

Here's the Stackblitz

.block {
    margin: 8px 0;
    height: 20px;
    width: 40px;
    border: 1px solid red;
}

<div>
    <div class="block"></div>
</div>
<div>
    <div class="block"></div>
</div>

Answer 1

The grid layout mode doesn't collapse margins:

body {
  display: grid;
}

.block {
  margin: 8px 0;
  height: 20px;
  width: 40px;
  border: 1px solid red;
}

<div>
  <div class="block"></div>
</div>
<div>
  <div class="block"></div>
</div>