为什么这种行为（在所有浏览器上）具有margin-top？

Question

This是我的代码：

HTML

<div class='father'>
    <div class='son'>Son</div>
</div>

CSS

.father
{
    background-color:blue;  
}

.son
{
    margin-top:50px;
    background-color:red;
    height:50px;
}

父亲的background-color蓝色在哪里？ 我知道如何解决这个问题（将padding-top:1px放到父亲身上），但我想知道这种行为的原因！

对我来说它没有意义，因为在每个浏览器上，不仅仅是IE，这就是行为。

Answer 1

这是折叠边距的结果。您可以在此主题上阅读good article by Eric Meyer，其中说明了此确切行为。以下图片来自他的文章。

以下是CSS2规范对此的评价。

8.3.1折叠边距

  

如果框的顶部和底部边距相邻，那么它就是   边际可能通过它崩溃。在这种情况下，   元素的位置取决于它与另一个元素的关系   边缘正在崩溃的元素。

     

  
• 如果元素的边距与其父元素的上边距折叠，则框的上边框边缘定义为与   父母。
  
• 否则，元素的父元素不参与边距折叠，或仅涉及父元素的下边距。   元素顶部边框边缘的位置与它相同   如果元素的底部边界不为零，那就好了。
  

     

请注意已折叠的元素的位置   对其他元素的位置没有影响   利润率正在崩溃;顶部边框边缘位置仅   布置这些元素的后代所需的。

来源：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Answer 2

这是因为div是块级元素。默认情况下，某些块级元素不包含任何填充。 Div是一个这样的元素。块级元素将占用容器的整个高度和宽度，同时考虑它可能包含的任何填充。

W3C Visual formatting model

默认情况下，父元素的高度设置为其内容的高度。在父级上设置高度后，这不再是默认值。检查它，我相信填充增加了高度。因此，除非在CSS中另有说明，否则高度最初由内容确定。然后，在大多数情况下（IE 6可能是例外），填充被添加到高度。

关于SO的好事，它有助于我们在回复中更加详细。 ：）

Answer 3

在CSS中，块级元素自然填充元素内容区域，因此您的“son”div完全填充您的“父亲”div。当然，您可以通过向父div添加margin / padding / height来绕过这一点。

Answer 4

你明确地设置了蓝色：

.father {
    background-color:blue;  
}

它已被覆盖（感谢CSS a.k.a级联中的“C”），但样式仍保留在父元素上（此处，适当地命名为“father”）。

如果您的.father框完全接收任何高度（请检查Firebug / Chrome开发工具检查器），而不是蓝色框将显示。我猜这是你在IE中看到的（或者在你的子元素风格出现之前可能还有一些内容）。我不认为IE调试工具显示边界框，但您可以使用JavaScript测试元素的高度。

Answer 5

从内容向外移动，你有填充，边框和边距（你可能知道）。背景仅涵盖填充，但不包括边距。