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

Question

HTML:

CSS:

div { background-color:green; border-top:1px solid white; }
p {          


        

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.

Answer 2

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%. ;-)

Answer 3

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

Answer 4

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.