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/

为什么黄色段落上面的区域是绿色的，下面的区域是白色的？

顺便说一句，我已经弄清楚了这一点，但我想我还是会发布这个。把它当作一个谜语:)

---

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

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

Answer 1

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