Hey Michael, Give the html element above the p that u want padding:1px; or border:1px; so its children dont 'punch through' their top margins (so more specifically padding-top:1px; in your case).
Otherwise the margins collapse and larger of 2 wins. (for a beginning the 1st few examples here explain it well) http://www.andybudd.com/archives/2003/11/no_margin_for_error/ (this is also very good) http://www.complexspiral.com/publications/uncollapsing-margins/ Arian Hojat On 7/28/07, Michael Leibson <[EMAIL PROTECTED]> 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> > <p>this is a paragraph</p> > </div> > </body> > > Any tips would be gratefully welcomed! > > - Michael > > > > > Be smarter than spam. See how smart SpamGuard is at giving junk > email the boot with the All-new Yahoo! Mail at > http://mrd.mail.yahoo.com/try_beta?.intl=ca > > ______________________________________________________________________ > 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/ > ______________________________________________________________________ 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/
