It seems that the behavior of margins collapsing between block elements inside and outside a BFC is not as straightforward as expected. For instance, when a button element's display property is set to inline-block, it forms a BFC, which should prevent margin collapsing.
However, if we were to change the display type of the BFC to 'block', theoretically the margins should collapse. But in reality, this does not seem to be the case based on the provided code snippet.
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; }
Would anyone care to share their insights on why turning a BFC into a block element does not result in margin collapsing?