Html 当块格式上下文变为块格式时，边距不会折叠

据我所知，按钮元素的

显示

是

内联块

，这意味着它形成了一个BFC（块格式上下文），我所知道的abt BFC是，BFC外部的块元素和BFC内部的块元素之间的边距不会折叠

但是，如果BFC的显示类型设置为“block

，则边距应收拢，因为本质上我们已将

内联块

转换为常规的

块`但在以下代码中似乎不会发生这种情况

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>

有人能解释为什么BFC变成块元素时，边距不会塌陷吗？

说：

CSS 2.2没有定义哪些属性应用于表单控件和 框架，或者如何使用CSS设置它们的样式。用户代理可以申请 这些元素的CSS属性

这适用于按钮，基本上意味着所有的赌注都被取消。因此，将

display:block

应用于按钮元素，虽然它有一些效果，但并不简单地使按钮呈现为块框，就像在span元素上设置

display:block

那样。特别是，它肯定不会改变其内容的呈现方式，也不会阻止按钮成为内容的BFC。

表示：

CSS 2.2没有定义哪些属性应用于表单控件和 框架，或者如何使用CSS设置它们的样式。用户代理可以申请 这些元素的CSS属性

---

这适用于按钮，基本上意味着所有的赌注都被取消。因此，将

display:block

应用于按钮元素，虽然它有一些效果，但并不简单地使按钮呈现为块框，就像在span元素上设置

display:block

那样。特别是，它肯定不会改变其内容的呈现方式，也不会阻止按钮成为其内容的BFC。

您不能将块级元素放入

按钮
…其无效HTML。这就是为什么。
显示
已设置为
块
，因此从技术上讲，它与另一个块级元素没有什么区别，只是视觉属性不同，例如
背景色
和其他一些。尺寸属性，如
宽度
，
高度
边距
，
填充
等，将根据块级元素算法进行计算。不..检查链接..比这更复杂。不管怎样，它是无效的HTML。你不能在
按钮中放置块级元素。
…它是无效的HTML。这就是为什么。
显示
已设置为
块
，因此从技术上讲，它与另一个块级元素没有什么区别，只是视觉属性不同，例如
背景色
和其他一些。尺寸属性，如
宽度
，
高度
边距
，
填充
等，将根据块级元素算法进行计算。不..检查链接..比这更复杂。无论如何，它是无效的。解释行为可能是正确的，但仍在寻找更具体的解释。解释行为可能是正确的，但仍在寻找更具体的解释。
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; }