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 ye开发者_运维百科llow 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

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.

Good question. :) You can solve it by giving the div a bottom border, or if you don't want to, by giving it a height of 100%. ;-)

The area above the yellow paragraph as you put it, is not actually above it. The green div contains the yellow paragraph. The yellow paragraph has a margin of 70px, pushing away from the green edges of its container. The yellow paragraph has a height set to it, hence we cannot see the yellow pushing away from the green on the bottom edge.

It's because the <p> is right against the bottom of the enclosing <div>. Since there's nothing constraining the height of the <div>, the rendering gives just enough space to fit down to the bottom of the <p>. Any explicit height > 50px will show the bottom.

Yup, on the update, exactly. The box expands vertically, but not horizonally. Also, padding puts space on the inside of the box, so the p can't push right up against the bounds.

Read up on the CSS box model, for example here: http://www.w3schools.com/css/css_boxmodel.asp and here: http://www.w3.org/TR/CSS21/box.html