Q:

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

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: 

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

A:

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.

