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

Question

认真学习CSS，有点迷惑。

我在div中有一张表。

​

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

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

<div class="bigdiv">
  <table>
    <tr>
      <td>foo</td>
    </tr>
  </table>
</div>

​

正如我所期望的那样，蓝宝石盒子下面有一条110像素的红色条纹。

但是，当我从div中取出填充内容时，页边距底部溢出了div，视觉外观是红色div边缘的海蓝宝石方框。

这是div的特定之处吗，还是容器通常必须具有非零填充才能使内容的边距出现在容器中？

Answer 1

边距折叠，这意味着当你有一个下边距的元素和另一个下面有上边距的元素时，它只会显示最大的那个。

父/子页边距也是如此。仅显示最大边距和父级之外的边距。

有两种css解决方法：

• overflow:auto
• padding:1px

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

对于更多的例子和更多的解释，你可以在这里找到：https://css-tricks.com/what-you-should-know-about-collapsing-margins/

您需要搜索的关键字是“边距折叠”。