Question

标题说明了一切。我经历了MDN page on margin collapsing，从我的阅读中看不出有什么方法可以防止marin崩溃。您可以在下面的操作中看到它，橙色框的高度为82px（4 * 20 + 2），而我希望高度为22px（20 + 2）。我想念什么？

.outer { border: 1px solid orange }
.inner { margin-bottom: 20px }

<div class="outer">
  <div class="inner"><table></table></div>
  <div class="inner"><table></table></div>
  <div class="inner"><table></table></div>
  <div class="inner"><table></table></div>
</div>

Answer 1

来自Mastering margin collapsing：

在三种基本情况下会发生保证金崩溃：

[…]

父级和第一个/最后一个孩子：如果没有边框，内边距，内联部分，已创建块格式上下文，[…]，则这些边距会折叠。

然后，Block formatting context文章说：

以下至少一项创建块格式化上下文：

[…]

  由 display: table ，table-row，table-row-group，table-header-group，table-footer-group的元素隐式创建的
匿名表单元格是HTML 表格，表格行，表格正文，表格标题和表格页脚的默认设置），或inline-table

因此<table>创建了一个块格式化上下文。这就是为什么边距不会崩溃的原因。您可以使用<table>或<div>（还将创建一个块格式化上下文）将display: table;更改为display: inline-block;。这也可以防止保证金崩溃：

.outer { border: 1px solid orange }
.inner { margin-bottom: 20px }
.inner > div { display: table }

<div class="outer">
  <div class="inner"><div></div></div>
  <div class="inner"><div></div></div>
  <div class="inner"><div></div></div>
  <div class="inner"><div></div></div>
</div>

Answer 2

在这种情况下，使表与众不同的是它们接收到的display属性。如果您将这些表定义为显示块，则会看到边距崩溃了。

.outer { border: 1px solid orange }
.inner { margin-bottom: 20px }
table { display: block }

<div class="outer">
  <div class="inner"><table></table></div>
  <div class="inner"><table></table></div>
  <div class="inner"><table></table></div>
  <div class="inner"><table></table></div>
</div>

我不认为这个问题是重复的，但这是与该主题相关的问题：

Why doesn't a <table>'s margin collapse with an adjacent <p>?

具体来说，请点击此处查看链接：

https://www.w3.org/TR/CSS21/box.html#collapsing-margins

边距-顶部边距-底部适用于：除具有表标题，表和内联表以外的其他表显示类型的元素之外的所有元素

当div包含表时，为什么不发生边距折叠？

2 个答案: