quick margin question

[SooTyLaD]

could someone explain something to me...

if you have the following code

<div id="outer" style="background-color: blue; }

<div id="inner" style="margin-top: 20px; }
</div>

</div>

then what seems to happen is although it will push the inner box down 20px due to the margin, it will also inadvertently add that margin to the outer div also - so in the above example adding the 20px margin to the inner will also pull down the blue outer div... (well, the top of the inner div is also where the top of the blue starts)

this is on a xhtml 1.1 dtd and in safari and firefox.

any ideas?

 

[JoeWed]

Are you using that exact code posted? If so your markup is wrong, it should be:

<div id="outer" style="background-color: blue;">

<div id="inner" style="margin-top: 20px;">
</div>

</div>

You had } instead of closing the ">

That ^^ works as expected for me in Firefox/Safari.

 

[SooTyLaD]

lol naah thats not the exact code... here is the exact code:

<div id="sContentTop">
 	 	
  <div id="mExtensions">
    <h2>Extensions</h2>
    <img src="/images/newbuild-tn.jpg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

</div>

styled with this:

#sContentTop { background: url('/graphics/bg-sand.jpg') repeat 0 0; border-bottom: 1px solid #fff; }

#mExtensions { width: 400px; border: 1px solid #ff0000; margin: 30px 40px; }

what i see on the resulting page is 30px of white at the top where it should be the bg-sand background... actually looking at it, i would say the margin has been applied to the #sContentTop div and not the #mExtensions one...

EDIT: here ya go look: the white shouldn't be at the top...