Michael Leibson wrote:
> Hi;
>
> I'm trying to position the content area of a p below the top outer edge of
> its containing div, by
> giving the p a large margin. The div is horizontally centered within the
> body, is flush with the
> top of the page, and has no margins or padding. To my surprise, the
> resulting p ends up lowering
> the div's own position -- lowering it on the page -- as though the body had
> a margin (which it
> doesn't). The only logical explanation I can deduce is that -- as the p has
> margins but the div
> doesn't -- this may be a case of 'collapsing margins', where the greater of
> the two adjacent
> margins is used. But this seems so counter-intuitive, I can't believe it's
> the actual cause.
>
> What's happening here?
>
> If this is a case of collapsing margins, what does one do to use a p's
> margins to lower its content
> area?
>
> Here are the styles, and markup:
>
> body {margin: 0; }
> div {width: 700px; margin-left: auto; margin-right: auto; height: 500px;
> background-color: green;
> margin-top: 0; padding: 0;}
> p {border-style: solid; border-color: red; margin: 10%;}
>
> <body>
> <div>
> <div>this is a paragraph</div>
> </div>
> </body>
>
> Any tips would be gratefully welcomed!
>
> - Michael
Hi Michael
Your logic is correct, it's a case of collapsing margins [1]. Have you checked
in IE though, you will see a difference, it will show how you first imagined,
with the margin inside the container, but only because your container has
haslayout with width: 700px. Please refer to [2] concerning the IE behavior
(check also in Firefox). The way around collapsing margins is to give the
container padding or a border (same color as background) and this will bring IE
and the good browsers sort of into line.
[1] <http://www.w3.org/TR/CSS21/box.html#collapsing-margins>
[2] <http://css-class.com/test/iehaslayoutmargins.htm>
Kind Regards, Alan
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
