CSS：添加边框会改变背景颜色（？！）

Question

HTML：

<div> <p></p> </div> 

CSS：

div { background-color:green; border-top:1px solid white; }
p { background-color:yellow; height:50px; margin:70px; } 

演示： http://www.jsfiddle.net/Xy8QF/4/

为什么黄色段落上方的区域为绿色，区域为白色？

btw我已经想到了这一点，但我还是认为我会发布这个。将其视为一个谜语:)

---

更新：只需添加到已接受的答案：

1. 只有垂直边距崩溃
2. 如果外部元素（在本例中为DIV）具有填充或边框，则边距不会折叠

Answer 1

这是因为position:static（默认值）的两个块元素的边距按CSS 2.1 8.3.1折叠，即边距被“转移”到body元素。这个demo表明，绝对定位的元素不会发生这种情况，上述标准中列出了一个例外（以及非none边框）。

Answer 2

好问题。 :)你可以通过给div一个底部边框来解决它，或者你可以通过给它一个100％的高度来解决它。 ; - ）

Answer 3

这是因为<p>正好位于封闭式<div>的底部。由于没有任何约束<div>的高度，渲染提供了足够的空间以适应<p>的底部。任何明确的高度＆gt; 50px将显示底部。

是的，在更新上，确切地说。盒子垂直展开，但不是水平展开。此外，填充会在框内部放置空间，因此p不能向上推动边界。

阅读CSS框模型，例如： http://www.w3schools.com/css/css_boxmodel.asp 在这里：http://www.w3.org/TR/CSS21/box.html

Answer 4

您放置的黄色段落上方的区域实际上并不在其上方。绿色div包含黄色段落。黄色段落的边距为70px，远离其容器的绿色边缘。黄色段落的高度设置为它，因此我们看不到黄色从底部边缘的绿色推开。