CSS - wierd margin/border/background problem

Question

referring URL: dev.qwerbles.com
Is the behavior described below correct/normal? It seems to
me that the
"with border" result should be what the user sees regardless
... given
the following:
markup:
<div id="header_wrap">...</div>
<div id="content_wrap">
<div id="content"><p>foo</p></div>
</div>
<div id="footer_wrap">...</div>
css:
div#header_wrap {
background: #5775A2;
div#content_wrap {
background: url(../images/main_bg.png) repeat-y;
div#footer_wrap {
background: #41536F;
As is (tested in FF3 & IE7), I see (from top to bottom):
- a block of color (#5775A2)
- 1em of white space (the default top-margin for <p>)
- text "foo" with a background image
- 1em of white space (the default bottom-margin for
<p>)
- a block of color (#41536F)
If I add this css (border: 1px solid)to the #content_wrap
rule then the
#content_wrap background stretches all the way from the
#header_wrap to
the #footer_wrap. In other words, the white space (caused by
the <p>
tags default margin) was filled in by the background image of
#content_wrap. Why doesn't the bg img fill in the white space
in both cases?
Alex

Answer 1

Alexander Ross wrote:
>
>> When you put a border on the content_wrap it
collapses the margin
>> which is still on the p tag.
>
>
> but <p> still has a 1em buffer (when the border is
set). I thought that
> if the margin was collapsed that the buffer should
disappear. No?
No, the border top and bottom on the content_wrap acts as a
barrier,
stopping it from collapsing. It there is no border then the
<p> margin
goes awol, outside of the content_wrap, causing the white
space top and
bottom of it.