css - 为什么当我更改 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选择器中看到的，我有一个背景，就是logo ，现在我希望该死的 Logo 位于距顶部略低 40px 的位置，这就是为什么我放置 margin-top: 40px; ，我不明白为什么，但不仅仅是 Logo 移动向下40px，整个页面向下移动! T_T，我已经花了将近 1 小时试图推断出我的大脑可以处理的所有逻辑，但我就是做不到!

而我的问题就像我说的一样，为什么整个页面会向下移动？ Logo 图像是唯一应该移动的元素，但为什么整个事情呢？我该怎么做才能修复它？

Answer 1

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

为什么填充超过边距？很简单:利润率有崩溃的倾向。 W3C 有一个 comprehensive section致力于管理 margin 崩溃的规则。

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