Html 为什么当我更改页边距顶部时，我的整个页面都会移动？

好的，我正在制作这个网站，来自一个教程，是的，我还是一个初学者，不，教程没有解释为什么会发生这种事情

基本上，就是这样，我有这样的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-->  

标志
我喜欢东西






同侧下唇
这是一只被放逐的猫科动物，因为它是一只被放逐的猫科动物。
这是一种新的生活方式。
在车辆的最大直径范围内，车辆的最大直径是多少。在威尼斯国家公园。
前庭无欧盟智人佩伦茨克（malesuada pharetra ac lacus）。
库拉比图尔和尤里西斯广场。在怀孕前，孕妇的外阴会变薄

临时性的，临时的，临时的，临时的。这是一种新的生活方式。
在车辆的最大直径范围内，车辆的最大直径是多少。在威尼斯国家公园。
前庭无欧盟智人佩伦茨克（malesuada pharetra ac lacus）。库拉比图尔和尤里西斯广场。埃尼安·普雷蒂姆·阿利奎特·维利特，
孕妇外阴骨化。临时性的，临时的，临时的，临时的

最新更新
前庭无欧盟智者佩伦茨克
2009年6月1日
这是一只虎鲸的pulvinar tincidunt。毛里斯岛purus turpis。阿利奎姆·梅特斯·阿库，
这是一种很好的生活方式。苏打慈姑。
在拉奥里特岛的拉奥里特岛上有一对夫妇。

前庭无欧盟智者佩伦茨克
2009年6月1日
这是一只虎鲸的pulvinar tincidunt。毛里斯岛purus turpis。阿利奎姆·梅特斯·阿库，
这是一种很好的生活方式。苏打慈姑。
在拉奥里特岛的拉奥里特岛上有一对夫妇。

订阅





流行物品






贡献者






版权所有©2009 MySite

保留所有权利

在CSS中，我有

#logo

h1选择器，正如您从父

#logo

选择器中看到的，我有一个背景，这正是徽标，现在我希望该死的徽标的位置比顶部稍微低40px，这就是为什么我把

边距顶部：40px，我不明白为什么，但不是标志向下移动40像素，而是整个页面向下移动！我已经花了将近一个小时试图推断出我的大脑能够处理的所有逻辑，但我就是做不到

我的问题就像我说的，为什么整个页面向下移动？徽标图像是唯一应该移动的元素，但为什么要移动整个元素呢？我该怎么做才能修复它呢？
尝试在父容器（即
#header
）上用padding:
padding top:40px
替换边距，因为您已经为
#logo
指定了背景图像，并且不必看到它移动

为什么要在页边空白处填充？很简单：利润率有崩溃的倾向。W3C有一个专门的规则来管理利润率崩溃

p/s：为了便于故障排除，请尝试在JSFIDLE上发布您的问题。它不仅有助于社区形象化您的问题，而且有助于加快实际解决问题的过程。
尝试在父容器（即
#header
）上用填充替换边距：
填充顶部：40px
，因为您已经为
#logo
指定了背景图像，并且不必看到它移动

为什么要在页边空白处填充？很简单：利润率有崩溃的倾向。W3C有一个专门的规则来管理利润率崩溃

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

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

试一试

试试这个：

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

试试这个：

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

在这种情况下有一点建议：始终使用Firebug（或Chromebug，或任何类似工具）查看发生了什么。它在处理CSS问题上帮了我很大的忙。。。你甚至可以动态更改值，因为我不是一个有经验的CSS专家，我通常会用这种方式调整CSS，直到它适合…尝试给padding top:40px作为logo…但我使用dreamweaver，它不会给我任何问题的迹象，因为基本上，这是一个逻辑错误，而且不是语法错误。尝试已经给了padding top，但是发生的是我为z索引设置的“logo”文本只下降了40像素，而不是图像。在浏览器中打开页面。然后使用Firebug，看看发生了什么。。。（事实上，除了单词97（哦，天哪，我是不是太天真了）之外，我从来没有