title: CSS: Adding a border changes the background-color (?!)
body: <p>HTML: </p>
  
  <pre><code>&lt;div&gt; &lt;p&gt;&lt;/p&gt; &lt;/div&gt; 
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>div { background-color:green; border-top:1px solid white; }
  p { background-color:yellow; height:50px; margin:70px; } 
  </code></pre>
  
  <p><strong>Demo:</strong> <a href="http://www.jsfiddle.net/Xy8QF/4/" rel="nofollow">http://www.jsfiddle.net/Xy8QF/4/</a> </p>
  
  <p>Why is the area above the yellow paragraph green, and the area bellow it white? </p>
  
  <p>btw I already figured this out, but I thought I'll post this anyway. Consider it a riddle <code>:)</code></p>
  
  <hr>
  
  <p><strong>Update:</strong> Just to add to the accepted answer: </p>
  
  <ol>
  <li>Only vertical margins collapse</li>
  <li>The margins will not collapse if the outer element (in this case the DIV) has a padding or border</li>
  </ol>