Why does my whole page move when I change margin-top? - css

Question

Alright, I am making this website, from a tutorial, yes I am still a beginner, no the tutorial did not explain why this things happens.
Basically, this is what happens, I have the CSS like this.
#charset "utf-8";
/* CSS Document */
body { font-family: Arial, Helvetica, sans-serif; }
.container
{
width: 800px;
margin: 0 auto;
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
#main
{
background: url(images/header.jpg) repeat-x;
}
#main .container
{
background: url(images/shine_04.jpg) no-repeat;
}
#logo
{
background: url(images/logo.png) no-repeat;
height:104px;
width:301px;
}
#logo h1
{
text-indent: -9999px;
margin-top: 40px;
}
And my HTML like this, I only post the body.
<div id="main">
<div class="container">
<div id="header">
<div id="logo">
<h1>Logo</h1>
</div>
<div id="tagline">
<h3>I Love Stuff</h3>
</div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--end header -->
<div id="content">
<h2>Lorem ipsum, Dolor sit</h2>
<h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
<p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.
Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel. </p>
<p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit,
gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>
<div id="news">
<h3>Latest Updates</h3>
<h4>Vestibulum id nulla eu sapien pellentesque</h4>
<small>June 1, 2009</small>
<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.
Etiam laoreet ante in purus laoreet id malesuada dui pretium. Read More</p>
<h4>Vestibulum id nulla eu sapien pellentesque</h4>
<small>June 1, 2009</small>
<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.
Etiam laoreet ante in purus laoreet id malesuada dui pretium. Read More</p>
</div><!--end news-->
</div><!--end content-->
<div id="sidebar">
<div id="subscribe">
<h3>Subscribe!</h3>
<ul>
<li>Subscribe via RSS</li>
<li>Get Email Updates</li>
<li>Follow us on Twitter</li>
</ul>
</div>
<div id="popular">
<h3>Popular Items</h3>
<ul>
<li>Lorem ipsum dolor site amet</li>
<li>Ulvinar tincidunt, Mauris id</li>
<li>Lorem ipsum dolor site amet</li>
<li>Proin tempor erat sit tene</li>
</ul>
</div>
<div id="contributors">
<h3>Contributors</h3>
<ul>
<li>John Smith, freelance writer</li>
<li>Jack McCoy, designer</li>
<li>Lenny Briscoe, editor</li>
<li>John Smith, martketing</li>
</ul>
Join Our Team
</div>
</div><!--end sidebar-->
</div><!--end main container-->
</div><!--end main-->
<div id="footer">
<div class="container">
<p>Copyright © 2009 MySite <br />
All Rights Reserved</p>
</div><!--end footer container-->
</div><!--end footer-->
In the CSS, I have the #logo h1 selector, as you can see from the parent #logo selector, I have a background, which is exactly the logo, now I want the damn logo to be positioned 40px slightly lower from the top, that's why I put margin-top: 40px; , and I don't understand why, but instead of just the logo moving 40px down, the whole page moves down! T_T, I have already spent almost 1 hour trying to deduce all the logic that my brain can handle behind this, but I just cant!
And my question is just like what I said, why does the whole page move downwards? the logo image is the only element that's supposed to move, but why the whole thing? and what do I do to fix it?

Answer 1

Try substituting margin with padding: padding-top: 40px on the parent container, i.e. #header, since you have specified a background image for #logo and do not have to see it move.
Why paddings over margins? It's simple: margins have the propensity to collapse. W3C has a comprehensive section dedicated to rules that govern margin collapse.
p/s: For the ease of troubleshooting, try posting your issue on JSFiddle. Not only does it help the community to visualize your problem, but it also aids to expedit the process of actually solving your problem.

Answer 2

Try
#logo
{
background: url(images/logo.png) no-repeat;
height:104px;
width:301px;
background-attachment:fixed;
background-position: 0px 40px;
}

Answer 3

try this:
#logo
{
background:url(images/logo.png) no-repeat;
background-position: 0px 40px;
height:144px;
width:301px;
}