为什么我改变margin-top时整个页面会移动？

Question

好的，我从一个教程制作这个网站，是的，我仍然是一个初学者，没有教程没有解释为什么会发生这种事情。

基本上，这是发生了什么，我有这样的CSS。

@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; 
} 

而我的HTML是这样的，我只发布身体。

<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><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></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.<a href="#"> Read More</a></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.<a href="#"> Read More</a></p> 
    </div><!--end news--> 

    </div><!--end content--> 

    <div id="sidebar"> 
    <div id="subscribe"> 
        <h3>Subscribe!</h3> 
        <ul> 
         <li><a href="#">Subscribe via RSS</a></li> 
         <li><a href="#">Get Email Updates</a></li> 
         <li><a href="#">Follow us on Twitter</a></li> 
        </ul> 
       </div> 
       <div id="popular"> 
        <h3>Popular Items</h3> 
        <ul> 
         <li><a href="#">Lorem ipsum dolor site amet</a></li> 
         <li><a href="#">Ulvinar tincidunt, Mauris id</a></li> 
         <li><a href="#">Lorem ipsum dolor site amet</a></li> 
         <li><a href="#">Proin tempor erat sit tene</a></li> 
        </ul> 
       </div> 
       <div id="contributors"> 
        <h3>Contributors</h3> 
        <ul> 
         <li><a href="#">John Smith, freelance writer</a></li> 
         <li><a href="#">Jack McCoy, designer</a></li> 
         <li><a href="#">Lenny Briscoe, editor</a></li> 
         <li><a href="#">John Smith, martketing</a></li> 
        </ul> 
        <a href="#">Join Our Team</a> 
       </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--> 

在CSS，我有#logo H1选择，因为你可以从父#logo选择看，我有一个背景，这是完全的标志，现在我想那该死的标志将略有定位40像素从顶部降低，这就是为什么我把margin-top: 40px;，我不明白为什么，但不是只有标志向下移动40px，整个页面向下移动！ T_T，我已经花了近1个小时试图推断出我的大脑在这背后可以处理的所有逻辑，但我只是不能！

而我的问题就像我说的，为什么整个页面向下移动？标志图像是应该移动的唯一元素，但为什么整个事情呢？我该如何解决它？

Answer 1

尝试在父容器上使用填充替换边距：padding-top: 40px，即#header，因为您已指定#logo的背景图像，并且不必看到它移动。

为什么填充边距？很简单：利润率有崩溃的倾向。 W3C有一个comprehensive section致力于规则边缘崩溃的规则。

p/s：为了便于排除故障，请尝试在JSFiddle上发布您的问题。它不仅可以帮助社区形象化你的问题，而且还有助于加快实际解决问题的过程。

Answer 2

尝试

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

Answer 3

试试这个：

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