标题说明了一切。我浏览了MDN page on margin collapsing，从我读到的内容看不出什么会阻止马林在这种情况下崩溃。您可以在下面看到它的实际效果，橙色框的高度为 82 像素（4*20+2），而我希望它的高度为 22 像素（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>【问题讨论】：
标签： css
来自Mastering margin collapsing：
保证金崩溃发生在三种基本情况：
[…]
父级和第一个/最后一个子级：如果没有边框、填充、内联部分、创建块格式上下文、[…]，则这些边距折叠。
那么，Block formatting context 的文章说：
块格式化上下文由以下至少一项创建：
[…]
- 由具有
display: table、table-row、table-row-group、table-header-group、table-footer-group的元素隐式创建的匿名表格单元格（这是 HTML tables，分别是表格行、表格正文、表格标题和表格页脚），或inline-table
所以<table> 创建了一个块格式化上下文。这就是为什么利润不会崩溃的原因。您可以使用display: table; 或display: inline-block; 将<table>s 更改为<div>s（这也会创建块格式化上下文）；这也将防止边距折叠：
.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>【讨论】：
<div> 不属于同一个 BCF。当然，表会创建一个 BCF，但是虽然每个表都是不同的 BFC，但表的 parents 仍然可以是同一个 BFC 的一部分。除非元素创建一个新的 BFC，如果他们的任何孩子这样做，但我看不到 MDN page on BFC 中的情况。
在这种情况下，表格的特别之处在于它们接收到的显示属性。如果您将表格定义为显示块，您将看到边距正在折叠。
.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
margin-top margin-bottom 适用于：除了table-caption、table和inline-table以外的table显示类型的元素以外的所有元素
【讨论】：