<h2>Margins Collapse for Adjacent Siblings</h2>
<div class="ts"></div>
<div class="bs"></div>

<h2 class="sheading">Using <code>display: inline-block</code> can avoid the Collapse</h2>
<div class="ts dib"></div>
<div class="bs dib"></div>
* {
  box-sizing: content-box;
}

body {
  font-family: Lato;
  margin: 1em;
  font-size: 1.4em;
}

h2 {
  font-size: 1.1em;
}

.sheading {
  margin-top: 70px;
}

div {
  background: orange;
  height: 120px;
}

.ts {
  margin-bottom: 40px;
}

.bs {
  margin-top: 25px;
}

.dib {
  display: inline-block;
  width: 100%;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Lato

External JavaScript

This Pen doesn't use any external JavaScript resources.