为什么包含div需要填充所包含的项目的边距在div中？

Question

认真学习CSS，有点困惑。

我在div中有一张桌子。

＆＃13;

＆＃13;

Map

＆＃13;

.bigdiv {
  background-color: red;
  padding: 10px;
}

table {
  background-color: aquamarine;
  margin-left: 300px;
  margin-bottom: 100px;
  padding: 10px;
}

＆＃13;

＆＃13;

＆＃13;

按照我的预期工作，在海蓝宝石盒子下方有一个110px的红色条带。

但是当我从div中取出填充物时，边缘底部溢出div，视觉外观是红色div边缘的海蓝宝石盒。

我想了解这种行为背后的规则。这是关于div的具体内容，还是容器通常必须有非零填充才能使内容的边距出现在容器中？

Answer 1

边距崩溃意味着当你有一个底部边缘的elemeht和另一个底部边缘的顶部边缘时，它将只显示最大边距。

对于父/子边距也是如此。只显示最大的保证金，而且显示在父母之外。

有2个css解决方法：

• overflow:auto
• padding:1px

可以将两个css规则添加到父级以解决问题。

有关更多示例和更多解释，您可以找到例如这里： https://css-tricks.com/what-you-should-know-about-collapsing-margins/

您需要搜索的关键字是＆＃34;保证金折叠＆＃34;