CSS: Margins collapse: BFC turned into block

by dkjain

HTML

<div class="no-collapse">
  <h2> MARGIN <u>DO NOT</u> COLLAPSE</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam perspiciatis libero hic perferendis pariatur minus, officia fugiat id doloremque cum. Esse id, molestiae. Nihil similique libero deserunt, facilis fuga totam.</p>
  <button>
    <h2>BUTTON TURNED INTO BLOCK</h2> This is a button turned into regular block
    </button>
</div>

<div class="collapse">
  <h2> MARGIN COLLAPSES</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam perspiciatis libero hic perferendis pariatur minus, officia fugiat id doloremque cum. Esse id, molestiae. Nihil similique libero deserunt, facilis fuga totam.</p>
  <p>Reguarl paragraph block</p>
</div>

CSS

div.no-collapse {
  background-color: antiquewhite; 
  border: 1px dotted black}

div.collapse { background-color: aqua;}
button {
  display: block;
  border: 0;
  padding-top: 0;
  padding: 0;
}

p { background-color: #ccc; }