CSS: Adding a border changes the background-color (?!)

Question

HTML:

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

CSS:

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

Demo: http://www.jsfiddle.net/Xy8QF/4/

Why is the area above the yellow paragraph green, and the area bellow it white?

btw I already figured this out, but I thought I'll post this anyway. Consider it a riddle :)

---

Update: Just to add to the accepted answer:

1. Only vertical margins collapse
2. The margins will not collapse if the outer element (in this case the DIV) has a padding or border

Answer 1

This happens because the margins of two block elements with position:static (the default) collapse as per CSS 2.1 8.3.1, i.e. the margin is "carried over" to the body element. This demo shows it does not happen with absolutely positioned elements, one of the exceptions (along with a non-none border) listed in the aforementioned standard.