ブロック書式コンテキストがブロックになったときに余白が崩壊しない

Question

ボタン要素のdisplayはinline-blockです。これはBFC（ブロック書式設定コンテキスト）を意味し、abt BFCはブロック要素間で崩れないことを意味しますBFCの外側とBFCの内側にある。

ただし、BFCの表示タイプが 'ブロック, then margins should collapses as essentially we have turnedインラインブロックinto a regularブロック'に設定されている場合、次のコードでは表示されません。

Here is the Fiddle

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; } 

誰もがBFCはブロック要素になっ用の余白が崩壊しない理由を説明できますか？

Answer 1

CSS 2.2 section 3.2は言う：

CSS 2.2は、CSSが彼らのスタイルを使用することができますどのような特性がコントロールと フレームを形成するために適用される定義、またはしません。利用者エージェントはこれらの要素に CSSプロパティを適用することができます

これはボタンに適用され、基本的にすべての賭けがオフであることを意味します。したがって、ボタン要素にdisplay:blockを適用すると、いくつかの効果がありますが、スパン要素の設定display:blockのようにボタンをブロックボックスとしてレンダリングするだけではありません。特に、コンテンツのレンダリング方法は変わらず、BFCからコンテンツへのボタンの停止もありません。