Question

据我所知，一个按钮元素display是inline-block，这意味着它形成了一个BFC（块格式化上下文），而我所知道的BFC就是边距不会在块之间崩溃BFC之外的元素和BFC内部的元素。

但是，如果BFC的显示类型设置为“阻止, then margins should collapses as essentially we have turned内嵌块into a regular阻止”，但这似乎不会出现在以下代码中。< / p>

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应用于按钮元素，虽然它具有一些效果，但不会简单地将按钮渲染为块框，例如，在span元素上设置display:block。特别是，它肯定不会改变其内容的呈现方式，也不会阻止按钮成为BFC的内容。

当块格式化上下文变为块时，边距不会崩溃

1 个答案: