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(默认值)的 block 元素的边距按照 CSS 2.1 8.3.1 折叠，即边距被“转移”到 body 元素。这demo显示它不会发生在绝对定位的元素上，这是上述标准中列出的异常(exception)之一(以及非 none 边框)。