<h2>Collapsing Margins for a Parent and First Child</h2>
<div class="parent"><div class="fc"></div></div>

<h2 class="sheading">Using <code>padding</code> can avoid the Collapse</h2>
<div class="parent padded"><div class="fc"></div></div>

<h2 class="sheading">Using <code>border</code> can also avoid the Collapse</h2>
<div class="parent bordered"><div class="fc"></div></div>
* {
  box-sizing: content-box;
}

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

h2 {
  font-size: 1.1em;
  margin-bottom: 8px;
}

.sheading {
  margin-top: 70px;
}

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

.fc {
  background: red;
  height: 100px;
  margin: 20px;
}

.padded {
  padding-top: 1px;
}

.bordered {
  border-top: 1px solid transparent;
}

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.