<h2>Adjacent Margins Collapsing in a Block Formatting Context</h2>

<div class="container">
  <p> Sibling 1 </p>
  <p> Sibling 2 </p>
</div>

<p class="p">Demo by Ritesh Kumar. <a href="http://www.sitepoint.com/understanding-block-formatting-contexts-in-css" target="_blank">See article</a>.</p>

p {
  margin: 10px 0;
  background-color: lightgreen;
}

.container {
  background-color: red;
  overflow: hidden;
  /* creates block formatting context */
}
/* general styling */

body {
  text-align: center;
  width: 500px;
  margin: 20px auto;
}

.p {
  background: none;
  padding-top: 150px;
  font-size: 13px;
}
/* general styling ends */